Live example for auto-binding, plus a small fix for include_external

ScottBeeson · Jun 4, 2014 · 0dc0157 · 0dc0157
1 parent 915f424
commit 0dc0157
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 25 deletions.
diff --git a/_includes/samples/databinding/auto-binding.html b/_includes/samples/databinding/auto-binding.html
@@ -0,0 +1,12 @@
+<!-- <link rel="import" href="/elements/demo-tabs.html"> -->
+
+<demo-tabs selected="0" bottom>
+  <demo-tab heading="index.html">
+{% highlight html %}
+{% include_external samples/databinding/auto-binding.html doc-sample %}
+{% endhighlight %}
+  </demo-tab>
+  <div class="result">
+    {% include_external samples/databinding/auto-binding.html runnable-sample %}
+  </div>
+</demo-tabs>
diff --git a/_plugins/include_external.rb b/_plugins/include_external.rb
@@ -41,8 +41,8 @@ def initialize(tag_name, param_string, tokens)
       @output = []
 
       begin
-        startpattern = /^\s*(?:\/\/|<!--)\s*\[START\s+(\w*)\s*\]/
-        endpattern = /^\s*(?:\/\/|<!--)\s*\[END\s+(\w*)\s*\]/
+        startpattern = /^\s*(?:\/\/|<!--)\s*\[START\s+(\S*)\s*\]/
+        endpattern = /^\s*(?:\/\/|<!--)\s*\[END\s+(\S*)\s*\]/
         f = File.new(@filename, "r")
         text = f.read()
         text.each_line do |line|

diff --git a/docs/polymer/databinding-advanced.md b/docs/polymer/databinding-advanced.md
@@ -255,29 +255,7 @@ binding in a document without having to create a custom element just for this pu
 For an auto-binding template, the data model is on the template itself. For example, to use 
 data binding at the top level of a document:
 
-{% raw %}
-    <body>
-      <!-- render data set -->
-      <template is="auto-binding" repeat="{{quotes}}">
-        <h3>{{quote}}</h3>
-        - <em>{{attribution}}</em>
-      </template>
-
-      <script>
-        var t = document.querySelector('template');
-        t.quotes = [{ 
-          attribution: "Plautus", 
-          quote: "Let deeds match words."
-        }, { 
-          attribution: "Groucho Marx", 
-          quote: "Time flies like an arrow. Fruit flies like a banana."
-        }];
-        t.addEventListener('template-bound', function() {
-          console.log('Template data binding complete.');
-        });
-      </script>
-    </body>
-{% endraw %}
+{% include samples/databinding/auto-binding.html %} 
 
 The auto-binding template inserts the instances it creates immediately after
 itself in the DOM tree (_not_ in its shadow DOM). In this case, the quotes are 

diff --git a/samples/databinding/auto-binding.html b/samples/databinding/auto-binding.html
@@ -0,0 +1,30 @@
+<!-- [START runnable-sample] -->
+<head>
+<link rel="import" href="/components/polymer/polymer.html">
+</head>
+<!-- [END runnable-sample] -->
+<!-- [START doc-sample] -->
+<body>
+  <!-- [START runnable-sample] -->
+  <!-- render data set -->
+  <template id="auto-bind-demo" is="auto-binding" repeat="{{quotes}}">
+    <h3>{{quote}}</h3>
+    - <em>{{attribution}}</em>
+  </template>
+
+  <script>
+    var t = document.querySelector('#auto-bind-demo');
+    t.quotes = [{ 
+      attribution: "Plautus", 
+      quote: "Let deeds match words."
+    }, { 
+      attribution: "Groucho Marx", 
+      quote: "Time flies like an arrow. Fruit flies like a banana."
+    }];
+    t.addEventListener('template-bound', function() {
+      console.log('Template data binding complete.');
+    });
+  </script>
+  <!-- [END runnable-sample] -->
+</body>
+<!-- [END doc-sample] -->