Docs update: HTML templates

docs/_index.md

@@ -13,7 +13,7 @@ See the documentation for a more complete [list of features](docs.html#intro-fea
 
 ## Quick tour
 
-Agility encourages (but does not require) writing your entire code in Javascript, that is, content (HTML), style (CSS), and behavior (JS) can all be contained within Javascript objects. The examples in this tour consist of such code. See [Getting started](docs.html#getting-started) in the docs for the HTML template adopted.
+Agility supports (but does not require) writing your entire code in Javascript, that is, content (HTML), style (CSS), and behavior (JS) can all be contained within Javascript objects. Unless otherwise stated the examples in this tour consist of such code. See [Getting started](docs.html#getting-started) in the docs for the HTML template adopted.
 
 ### Object initialization
 
@@ -40,9 +40,34 @@ A more compact syntax is also supported. It's handy when dealing with simple obj
     $$.document.append(message);
 <div class="demo"></div>
 
+
+### HTML templates
+
+As already mentioned you don't have to place HTML templates in your JavaScript code. For example, you can pick your format from a DOM element:
+
+    :::javascript
+    // Hello World
+    var message = $$({
+      model: {}, 
+      view: {
+        format: $('#my-format').html()
+      }, 
+      controller: {}
+    });
+    $$.document.append(message);
+
+And then in your HTML file:
+
+    <script id="my-format" type="text/html">
+       <div>Hello World</div>
+    </script>
+
+Although perfectly equivalent to the previous example, this pattern is useful whenever format and behavior need to live on separate files.
+
+
 ### Model-view bindings
 
-The framework comes with a powerful model-view binder, so that views are always in sync with models and vice-versa. Establishing bindings is as simple as introducing a `data-bind` attribute in the desired DOM element; the factory function takes care of creating the necessary controllers:
+Agility comes with a powerful model-view binder, so that views are always in sync with models and vice-versa. Establishing bindings is as simple as introducing a `data-bind` attribute in the desired DOM element; the factory function takes care of creating the necessary controllers:
 
     :::javascript
     // Bind model to element's HTML content

index.html

@@ -141,7 +141,7 @@
 <p>The library itself is a small Javascript file (goal is to remain under 10K), and its only dependency is a recent version of jQuery. The project is licensed under the liberal <a href="https://github.com/arturadib/agility/blob/master/LICENSE">MIT license</a>.</p>
 <p>See the documentation for a more complete <a href="docs.html#intro-features">list of features</a>.</p>
 <h2>Quick tour</h2>
-<p>Agility encourages (but does not require) writing your entire code in Javascript, that is, content (HTML), style (CSS), and behavior (JS) can all be contained within Javascript objects. The examples in this tour consist of such code. See <a href="docs.html#getting-started">Getting started</a> in the docs for the HTML template adopted.</p>
+<p>Agility supports (but does not require) writing your entire code in Javascript, that is, content (HTML), style (CSS), and behavior (JS) can all be contained within Javascript objects. Unless otherwise stated the examples in this tour consist of such code. See <a href="docs.html#getting-started">Getting started</a> in the docs for the HTML template adopted.</p>
 <h3>Object initialization</h3>
 <p>Agility works with a single object type that contains a full model-view-controller stack. These MVC objects are built by passing initializers to the <a href="docs.html#factory">factory function</a> <code>$$()</code>, which takes care of setting up default bindings, auto-proxying, etc. The example below initializes an MVC object with empty model, a simple view, and default controllers:</p>
 <div class="codehilite"><pre><span class="c1">// Hello World</span>
@@ -166,8 +166,30 @@ <h3>Object initialization</h3>
 
 
 <p><div class="demo"></div></p>
+<h3>HTML templates</h3>
+<p>As already mentioned you don't have to place HTML templates in your JavaScript code. For example, you can pick your format from a DOM element:</p>
+<div class="codehilite"><pre><span class="c1">// Hello World</span>
+<span class="kd">var</span> <span class="nx">message</span> <span class="o">=</span> <span class="nx">$$</span><span class="p">({</span>
+  <span class="nx">model</span><span class="o">:</span> <span class="p">{},</span> 
+  <span class="nx">view</span><span class="o">:</span> <span class="p">{</span>
+    <span class="nx">format</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#my-format&#39;</span><span class="p">).</span><span class="nx">html</span><span class="p">()</span>
+  <span class="p">},</span> 
+  <span class="nx">controller</span><span class="o">:</span> <span class="p">{}</span>
+<span class="p">});</span>
+<span class="nx">$$</span><span class="p">.</span><span class="nb">document</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>
+</pre></div>
+
+
+<p>And then in your HTML file:</p>
+<div class="codehilite"><pre><span class="nt">&lt;script</span> <span class="na">id=</span><span class="s">&quot;my-format&quot;</span> <span class="na">type=</span><span class="s">&quot;text/html&quot;</span><span class="nt">&gt;</span>
+   <span class="nt">&lt;div&gt;</span>Hello World<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/script&gt;</span>
+</pre></div>
+
+
+<p>Although perfectly equivalent to the previous example, this pattern is useful whenever format and behavior need to live on separate files.</p>
 <h3>Model-view bindings</h3>
-<p>The framework comes with a powerful model-view binder, so that views are always in sync with models and vice-versa. Establishing bindings is as simple as introducing a <code>data-bind</code> attribute in the desired DOM element; the factory function takes care of creating the necessary controllers:</p>
+<p>Agility comes with a powerful model-view binder, so that views are always in sync with models and vice-versa. Establishing bindings is as simple as introducing a <code>data-bind</code> attribute in the desired DOM element; the factory function takes care of creating the necessary controllers:</p>
 <div class="codehilite"><pre><span class="c1">// Bind model to element&#39;s HTML content</span>
 <span class="kd">var</span> <span class="nx">message</span> <span class="o">=</span> <span class="nx">$$</span><span class="p">({</span><span class="nx">txt</span><span class="o">:</span><span class="s2">&quot;I&#39;m text from a model&quot;</span><span class="p">},</span> <span class="s1">&#39;&lt;div data-bind=&quot;txt&quot;/&gt;&#39;</span><span class="p">);</span>
 <span class="nx">$$</span><span class="p">.</span><span class="nb">document</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">message</span><span class="p">);</span>