Testing out two way binding with custom elements results in error

1

I am having trouble understanding how this works. I have a calendar custom element which is added to the html file of scheduler component. I want to return some options from the scheduler component to the calendar element. I am a newby so am learning syntax etc at the same time. My approach was to create a two way binding variable in calendar (the custom component) which receives a value from the scheduler. Since its loaded up in the scheduler it should display the value in the console. Its instead giving the following error:

aurelia-logging-console.js?dc89:45 ERROR [app-router] Error: Parser Error: Unconsumed token world at column 6 in expression [hello world]
    at ParserImplementation.err (aurelia-binding.js?5f98:2857)
    at ParserImplementation.parseBindingBehavior (aurelia-binding.js?5f98:2392)
    at Parser.parse (aurelia-binding.js?5f98:2349)
    at SyntaxInterpreter.bind (aurelia-templating-binding.js?570d:489)
    at SyntaxInterpreter.interpret (aurelia-templating-binding.js?570d:461)
    at TemplatingBindingLanguage.createAttributeInstruction (aurelia-templating-binding.js?570d:721)
    at ViewCompiler._compileElement (aurelia-templating.js?8628:3013)
    at ViewCompiler._compileNode (aurelia-templating.js?8628:2776)
    at ViewCompiler._compileElement (aurelia-templating.js?8628:3096)
    at ViewCompiler._compileNode (aurelia-templating.js?8628:2776)

This is what I did:
In calendar, I placed this for the variable ā€œmessageā€ - two way bindingā€¦ etc
@bindable({ defaultBindingMode: bindingMode.twoWay }) message: string;

and, in scheduler.html (the parent) I placed this as an attribute:
<calendar message.bind="hello world"></calendar>

My question, How do you add a variable into a custom component that receives a a value from the parent it has been added to?

I think I set the var correctly but I would really like to set up this and other vars in the view model instead of the HTMLā€¦ wondering how you would do thisā€¦ I want options set in scheduler to be received by the calendar elementā€¦

Regards

Simon

2

The error you got means the expression in your template is not a valid expression.

In JS, you cannot have a variable name with space: hello world

I guess you want to pass a string literal with value ā€˜hello worldā€™, so maybe remove .bind?

3

Yes that worked. I also wondered how you might set two-way variables not in the html view as I have done <calendar message="hello world"></calendar>but in the VM. Can you access the custom element vars from the parent VM?

1 Like
4 
<calendar view-model.ref="myCalendar"></calendar>

In the parent VM

...
attached() {
   if(this.myCalendar)
      this.myCalendar.message = 'Hello World';
}
...

Note: You should if test if this.myCalendar exists since I think it will not exist until attached() but maybe in bind() canā€™t remember.

1 Like
5

Also pretty sure this works with the tick marks since .bind="..." is something like using eval('...'); so if it isnā€™t valid js then youā€™ll have an error.

<calendar message.bind=" 'Hello World' "></calendar>
1 Like