Import Polymer 0.8 and several key elements.

third_party/polymer/v0_8/components/polymer/src/lib/bind/demo/src/annotations-bind-demo.html

Index: third_party/polymer/v0_8/components/polymer/src/lib/bind/demo/src/annotations-bind-demo.html
diff --git a/third_party/polymer/v0_8/components/polymer/src/lib/bind/demo/src/annotations-bind-demo.html b/third_party/polymer/v0_8/components/polymer/src/lib/bind/demo/src/annotations-bind-demo.html
new file mode 100644
index 0000000000000000000000000000000000000000..3f7d87d4188903b305e9bee9c16e4972b6f97c03
--- /dev/null
+++ b/third_party/polymer/v0_8/components/polymer/src/lib/bind/demo/src/annotations-bind-demo.html
@@ -0,0 +1,76 @@
+<link rel="import" href="../../../module.html">
+<link rel="import" href="../../../lang.html">
+<link rel="import" href="../../../annotations/annotations.html">
+
+<link rel="import" href="../../bind.html">
+<link rel="import" href="../../bind-effects.html">
+<link rel="import" href="../../bind-annotations.html">
+
+<template>
+
+  <div>annotated #foo span:</div>
+  <br>
+  <span id="foo" attribute="{{path}}" oneway="[[otherpath]]" style="{{specialStyle}}">{{text}}</span>
+
+</template>
+
+<script>
+
+  // TODO(sjmiles): should 'bind-annotations' blend the other two modules
+  // somehow so we don't need to include all three here?
+  using(['Annotations', 'bind', 'bind-annotations'], 
+
+   function(Annotations, Bind, BindAnnotations) {
+
+    var out = document.querySelector('#abd');
+    out.innerHTML += '<hr><h3>annotations-bind demo</h3><hr>';
+
+    // phase one: prototyping
+
+    var prototype = {};
+    var template = currentImport.querySelector('template');
+    var list = Templabindinate(prototype, template);
+
+    // phase two: instancing
+    
+    var model = Object.create(prototype);
+    var dom = Instancinance(model, template);
+    document.body.appendChild(dom);
+
+    // affect model
+
+    model.text = 'Hello from Model';
+    model.path = 'path';
+    model.otherpath = 'other.path';
+    model.specialStyle = {backgroundColor: "red"};
+
+    // effects visible in dom
+
+    var foo = dom.querySelector('#foo');
+    out.innerHTML += 
+      'foo.<b>path</b> = "' + model.path + '"<br>'
+      + 'foo.<b>otherpath</b> = "' + model.otherpath + '"<br>'
+      + 'foo.<b>specialStyle</b> = "' + JSON.stringify(model.specialStyle)+ '"<br>'
+      ;
+
+    // ad hoc abstractions
+    
+    function Templabindinate(model, template) {
+      Bind.prepareModel(model);
+      var list = Annotations.parseAnnotations(template);
+      BindAnnotations.addEffects(model, list);
+      return list;
+    }
+
+    function Instancinance(model, template) {
+      Bind.prepareInstance(model);
+      Bind.createBindings(model);
+      var dom = document.importNode(template.content, true);
+      model._nodes = BindAnnotations.marshalAnnotatedNodes(model._nodes, dom, 
+        Annotations.findAnnotatedNode);
+      return dom;
+    }
+
+  });
+
+</script>