Merge pull request #130 from Polymer/master

8/1 master -> stable

Author: dfreedm

README.md

@@ -136,7 +136,7 @@ MDV is designed to as two primitives which could eventually become standardized
 
 MDV is mainly concerned with being robust and efficient in interacting with application data and keeping the DOM in sync , but more advanced behaviors can be accomplished via one or both of the following:
 
-* [A Custom Syntax API](https://github.com/Polymer/mdv/blob/master/docs/syntax_api.md)
+* [A Binding Delegate API](https://github.com/Polymer/mdv/blob/master/docs/syntax_api.md)
 * [Expression Syntax](https://github.com/Polymer/mdv/blob/master/docs/expression_syntax.md)
 
 ### Advanced Topics

benchmark/index.html

@@ -115,10 +115,10 @@ <h3 style="margin-left: 440px">Binding Density</h3>
 
 function changeBenchmark() {
   benchmark = window[benchmarkSelect.value];
-  configSelect.innerHTML = '';
+  configSelect.textContent = '';
   benchmark.configs.forEach(function(config) {
     var option = document.createElement('option');
-    option.innerHTML = config;
+    option.textContent = config;
     configSelect.appendChild(option);
   });
 }
@@ -133,8 +133,8 @@ <h3 style="margin-left: 440px">Binding Density</h3>
 
 goButton.addEventListener('click', function() {
   goButton.disabled = true;
-  goButton.innerHTML = 'Running...';
-  ul.innerHTML = '';
+  goButton.textContent = 'Running...';
+  ul.textContent = '';
 
   var bindingDensities = bindingDensityInput.value.split(',').map(function(val) {
     return Number(val) / 100;
@@ -148,8 +148,8 @@ <h3 style="margin-left: 440px">Binding Density</h3>
 
   testTypes.forEach(function(testType, i) {
     var li = document.createElement('li');
-    li.innerHTML = testType;
-    li.setAttribute('style', 'color: ' + colors[i]);
+    li.textContent = testType;
+    li.style.color = colors[i];
     ul.appendChild(li);
   });
 
@@ -159,12 +159,12 @@ <h3 style="margin-left: 440px">Binding Density</h3>
 
     datasets = [];
 
-    timesCanvas.setAttribute('height', '400');
-    timesCanvas.setAttribute('width', '800');
+    timesCanvas.height = 400;
+    timesCanvas.width = 800;
     timesCanvas.setAttribute('style', '');
 
     var labels = bindingDensities.map(function(density) {
-      return (density * 100) + '%';
+      return density * 100 + '%';
     });
 
     var timesArray = [];
@@ -176,32 +176,32 @@ <h3 style="margin-left: 440px">Binding Density</h3>
 
     var ctx = timesCanvas.getContext("2d");
     new Chart(ctx).Line({
-      labels : labels,
-      datasets : timesArray.map(function(times, i) {
+      labels: labels,
+      datasets: timesArray.map(function(times, i) {
         return {
-          fillColor : 'rgba(255, 255, 255, 0)',
-          strokeColor : colors[i],
-          pointColor : colors[i],
-          pointStrokeColor : "#fff",
-          data : times
+          fillColor: 'rgba(255, 255, 255, 0)',
+          strokeColor: colors[i],
+          pointColor: colors[i],
+          pointStrokeColor: "#fff",
+          data: times
         };
       })
     }, {
-      bezierCurve : false
+      bezierCurve: false
     });
 
     goButton.disabled = false;
-    goButton.innerHTML = 'Run Benchmarks';
+    goButton.textContent = 'Run Benchmarks';
     updateStatus();
   }
 
   function updateStatus(density, testType, runCount) {
     if (!testType) {
-      statusSpan.innerHTML = '';
+      statusSpan.textContent = '';
       return;
     }
 
-    statusSpan.innerHTML = testType + ' ' + (100 * density) +
+    statusSpan.textContent = testType + ' ' + (100 * density) +
         '% binding density, ' + runCount + ' runs';
   }
 

docs/syntax_api.md

@@ -20,18 +20,12 @@ MDV's native features enables a wide-range of use cases, but (by design) don't a
 
 * ... And anything else you'd like.
 
-Enabling these features in MDV is a matter of implementing and registering a Custom Syntax.
+Enabling these features in MDV is a matter of implementing and registering a binding delegate.
 
 ### Basic usage
 
-```html
-<template bind syntax="MySyntax">
-  {{ What!Ever('crazy')->thing^^^I+Want(data) }}
-</template>
-```
-
 ```JavaScript
-HTMLTemplateElement.syntax['MySyntax'] = {
+templateElement.bindingDelegate = {
   getBinding: function(model, path, name, node) {
     // If this function is defined, the syntax can override
     // the default binding behavior
@@ -44,52 +38,9 @@ HTMLTemplateElement.syntax['MySyntax'] = {
 }
 ```
 
-### Custom Syntax Registration
-
-A Custom Syntax is an object which contains one or more syntax methods which implement specialized behavior. This object is registered with MDV via the HTMLTemplateElement. The syntax need only implement syntax methods it requires to accomplish its goals.
-
-```JavaScript
-var syntax = {
-  getBinding: function(model, path, name, node) {},
-  getInstanceModel: function(template, model) {}
-};
-HTMLTemplateElement.syntax['name'] = syntax;
-```
-
-### Custom Syntax Usage
-
-The `<template>` element can declare its intent to use a Custom Syntax by naming it in its `syntax` attribute:
-
-```html
-<template syntax="MyCustomSyntaxName">
- ...
-</template>
-```
-
-If a `syntax` can be located via the registry by the `<template>`, the syntax's methods will be called to possibly override its default behavior.
-
-When a `<template>` inserts an new instance fragment into the DOM,
-
-* If a syntax used and located
-* ...and it contains sub-templates
-* ...and the sub-template does not have a syntax attribute
-
-... Then the sub-template will "inherit" the parent's syntax. e.g.:
-
-```html
-<template bind syntax="FooSyntax">
-  <!-- FooSyntax is used here -->
-  <template bind>
-    <!-- FooSyntax is used here -->
-  </template>
-  <template syntax="OtherSyntax">
-    <!-- OtherSyntax is used here, NOT FooSyntax -->
-  </template>
-</template>
-```
 ### getBinding
 
-The `getBinding` syntax method allows for a custom interpretation of the contents of mustaches (`{{` ... `}}`).
+The `getBinding` method allows for a custom interpretation of the contents of mustaches (`{{` ... `}}`).
 
 When a template is inserting an instance, it will invoke the `getBinding` method (if it is implemented by the syntax) for each mustache which is encountered. The function is invoked with four arguments:
 
@@ -102,7 +53,7 @@ syntax.getBinding = function(model, path, name, node);
 * `name`: The context in which the mustache occurs. Within element attributes, this will be the name of the attribute. Within text, this will be 'textContent'.
 * `node`: A reference to the node to which this binding will be created.
 
-If the `getBinding` syntax method wishes to handle binding, it is required to return an object which has at least a `value` property. If it does, then MDV will call
+If the `getBinding` method wishes to handle binding, it is required to return an object which has at least a `value` property. If it does, then MDV will call
 
 ```JavaScript
 node.bind(name, retval, 'value');
@@ -114,7 +65,7 @@ If the 'getBinding' wishes to decline to override, it should not return a value.
 
 ### getInstanceModel
 
-The `getInstanceModel` syntax method allows a syntax to provide an alterate model than the one the template would otherwise use when producing an instance.
+The `getInstanceModel` method allows a syntax to provide an alterate model than the one the template would otherwise use when producing an instance.
 
 When a template is about to create an instance, it will invoke the `getInstanceModel` method (if it is implemented by the syntax). The function is invoked with two arguments:
 
@@ -128,7 +79,7 @@ The template element will always use the return value of `getInstanceModel` as t
 
 ### CompoundBinding
 
-MDV contains a helper object which is useful for the implementation of a Custom Syntax.
+MDV contains a helper object which is useful for the implementation of a Binding Delegate.
 
 ```JavaScript
 var combinatorFunction = function(values) {

src/template_element.js

@@ -837,7 +837,7 @@
           deepCloneIgnoreTemplateContent(content) : content.cloneNode(true);
 
       addMapBindings(instance, map, model, delegate, bound);
-      // TODO(rafaelw): We can do this more lazily, but setting a sentinal
+      // TODO(rafaelw): We can do this more lazily, but setting a sentinel
       // in the parent of the template element, and creating it when it's
       // asked for by walking back to find the iterating template.
       addTemplateInstanceRecord(instance, model);
@@ -946,16 +946,13 @@
 
   function newTokenCombinator(tokens) {
     return function(values) {
-      var newValue = '';
+      var newValue = tokens[0];
 
-      for (var i = 0, text = true; i < tokens.length; i++, text = !text) {
-        if (text) {
-          newValue += tokens[i];
-        } else {
-          var value = values[i];
-          if (value !== undefined)
-            newValue += value;
-        }
+      for (var i = 1; i < tokens.length; i += 2) {
+        var value = values[i];
+        if (value !== undefined)
+          newValue += value;
+        newValue += tokens[i + 1];
       }
 
       return newValue;
@@ -1277,7 +1274,7 @@
 
       if (!this.inputs.size) {
         // End iteration
-        templateIteratorTable.delete(this);
+        templateIteratorTable.delete(this.templateElement_);
         this.close();
       }
     },