Template Syntax

gistfile1.txt

General proposed syntax (via Rob Eisenberg):

  property="{{expression}}" -- one way binding from a model to the property on the element, identified by {{}}
  on-event="{{expression}}" -- adds an event handler to the event which executes the expression, identified by the on- prefix
  ${expression}             -- string interpolation within HTML content and attributes (based on ES6 syntax)
  
  
  
This is necessitated by the following tenets:

1) HTML attributes are used only to initialize components.
2) All bindings manipulate element properties, not their attributes.
3) The HTML attribute name of a databound attribute must be escaped in some way.



Data binding to element properties necessitates the following:

1) Databinding: The property name must be encoded in the attribute. 
                The binding expression is in the attribute’s value.
2) Event Binding: The event name must be encoded in the attribute. 
                  We must also be able to distinguish it from an attribute. 
                  The event expression is in the value.



Continuing to use {{ }} interpolation syntax requires special considerations:

1) Binding semantics cannot change based on expression context
2) attr="{{ user }}" and attr="My name is {{ user }}" must both work
3) {{ }} must always call toString() on the enclosed value

The considered syntax would then be:

<dialog title="Hello ${user}">    ===    <dialog [title]="'Hello ' + (user|stringify)">