Skip to content

RFC: <proposal #someId [bind]="expr" (event)="doWork()"> #133

Closed
@mhevery

Description

@mhevery

Update from @IgorMinar on 2014-11-10:

To summarize the constraints, the solution we are looking for must match the following:

  1. Be valid HTML (see this issue for discussion about [, ], (, ) chars in attr name of valid html).
  2. Be Web designer friendly
  3. Interoperable with web-components (don't interfere with web component initialization)
  4. Support debugging story via inspecting rendered DOM during development
  5. 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.
  6. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions