Description
Update from @IgorMinar on 2014-11-10:
To summarize the constraints, the solution we are looking for must match the following:
- Be valid HTML (see this issue for discussion about
[
,]
,(
,)
chars in attr name of valid html). - Be Web designer friendly
- Interoperable with web-components (don't interfere with web component initialization)
- Support debugging story via inspecting rendered DOM during development
- The syntax must clearly distinguish between 1) string literal; 2) expression (binding); 3) expression (events) 4) declaration of variables. All of this must be clear from template without understanding which directives are active or what the internal semantics of these directives are.
- Support additional info or options for each binding in order to avoid directive specific micro-syntaxes (this enables for tooling to work without hardcoding support for micro-syntaxes). This must be supported in a way that preserves constraint no. 5.
Please don't propose any new solutions that don't meet all of the criteria above.
Original description:
Current proposal for Angular2 syntax is
<element #someId [bind]="expr" (event)="doWork()">
There are several issues with this proposal which have come to light recently. These are:
element.setAttribute('[foo]', 'exp')
does not work.
In all browsers tested (Chrome, IE, Safari) the above is an error. This means that it is not possible to create a valid template programatically. It is still possible to parse and read the template.
It seems like that calling setAttribute
requires first character to be a-z|_
specifically -
is not allowed as starting character nor are any of these ~!@#$%^&*(){}
.
Third part HTML shorteners don't support non-standard characters.
Tools such as Slim, Haml, JADE don't support generating special characters. This would break the backend servers such as Ruby on Rails.
SVG requires valid XML and []()#
is not valid XML.
This seems to be in the spec, but at least Chrome browser does not have issues with these characters. Need to investigate more.
Straw-man Proposal
We go back to slightly longer text based syntax
<element var="someId" bind-value="expr" on-event="doWork()">
The caveat is the ng-repeat
syntax, which requires a parameter
<ul>
<li bind-ng-repeat--item="items">{{item}}</li>
</ul>
Why the weird ng-repeat
syntax? We want ta make sure that all bindings starting with bind-
have right hand side as a valid expression. item in items
is not a valid expression, it is a micro syntax. For this reason we need a way to pass the local-var-name into ng-repeat
as a string literal, and not as an expression. Hence the ng-repeat--<local-var-name-literral>="expression"
.
Please leave your thoughts here.
Background
The reasoning behind the new syntax can be found here: https://docs.google.com/document/d/1kpuR512G1b0D8egl9245OHaG0cFh0ST0ekhD_g8sxtI/edit#heading=h.xgjl2srtytjt