Skip to content

Commit

Permalink
progress; refined README
Browse files Browse the repository at this point in the history
  • Loading branch information
@atmin
atmin committed Sep 24, 2013
1 parent 8e0c01e commit 98065b6
Show file tree
Hide file tree
Showing 8 changed files with 334 additions and 193 deletions.
64 changes: 29 additions & 35 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,19 23,11 @@ Why

* ideas by humans, automation by computers

* extend the concept of a templating engine with the most essential feature of [JavaScript MV*](http://www.infoq.com/research/top-javascript-mvc-frameworks) frameworks—[data-binding](http://en.wikipedia.org/wiki/Data_binding)

Other [JavaScript MV*](http://www.infoq.com/research/top-javascript-mvc-frameworks) frameworks:
* do not require explicit hooks, boilerplate initialization code or invent a [DSL](http://en.wikipedia.org/wiki/Domain-specific_language) to build the DOM—template already contains relations between model properties and HTML tags (which result in DOM nodes), so leverage this

* require you explicitly specify (via code or DOM attributes) how to bind data to DOM nodes

* or invent JavaScript-based [DSL](http://en.wikipedia.org/wiki/Domain-specific_language) to build the DOM

* [Ember](http://emberjs.com) auto-updating Handlebars templates feature comes closest to what `jtmpl` is, but the templating syntax is more complex, it replaces HTML tags with custom tags. In contrast, `jtmpl`:
* augments HTML tags by adding Mustache tags, so it can bind to any property
* also binds DOM events custom reactors
* is tiny in comparison

`jtmpl` enables you to focus on structure and data and not worry about DOM synchronization. Assuming you already know HTML, JavaScript and Mustache, the learning curve is basically non-existent. Check the [Kitchensink demo](kitchensink.html).
`jtmpl` enables you to focus on structure and data and not worry about DOM synchronization. Assuming you already know HTML, JavaScript and Mustache, the learning curve is non-existent. Check the [Kitchensink demo](kitchensink.html).



Expand Down Expand Up @@ -64,7 56,7 @@ Hello, world



* `Stage2` renders live DOM structure (think automatic [MVC](http://en.wikipedia.org/wiki/Model–view–controller)):
* `Stage2` renders live DOM structure:

<iframe src="hello.html" style="border:0; border-left:1px dotted black; height:4em"></iframe>

Expand Down Expand Up @@ -146,7 138,7 @@ Details

* `jtmpl('#target-id' or domElement, 'template contents or "#template-id"', model)`&mdash;compiles a template using `model`, injects it into target and binds it to `model`.
* template contents can be already prerendered by server to save the client some processing and help for SEO
* if target is a script tag (of type="text/html" or similar), then it is replaced with a div.
* if target is a script tag (of type="text/html" or similar), then it is replaced with a div. This makes possible directly converting a template, embedded in a clean way, into a DOM node

* _Deprecated_ `jtmpl(selector)`&mdash;returns an array, just a handy wrapper around `document.querySelectorAll`. Will remove this feature, as `jtmpl(string)` syntax will probably be used for something more consistent

Expand All @@ -164,6 156,8 @@ Details

* and the same goes for section items

* all default enclosing tags are configurable

* `data-jt` attributes containing metadata for `Stage2` are injected in HTML elements

* `Stage1` also emits section structures (with changed delimiters) embedded in HTML comments
Expand Down Expand Up @@ -233,28 227,6 @@ Showcase of all features, tests
Feel free to modify <code>model</code> from JS console and observe changes.
</p>

<h3>Nested collections</h3>
<ul class="dummy-class just for the_test">
{{#collection}}
<li>
<h4><code>model.collection[i].inner</code></h4>
<ul>
{{#inner}}<li>{{.}}</li>{{/inner}}
{{^inner}}<li>&lt; empty &gt;</li>{{/inner}}
</ul>
&nbsp;
<button onclick={{innerPush}}>push</button>
<button onclick="{{innerPop}}" disabled={{popDisabled}}>pop</button>
</li>
{{/collection}}
{{^collection}}
<li>&lt; empty &gt;</li>
{{/collection}}
</ul>
<br>
<button onclick={{push}}>push</button>
<button onclick="{{pop}}" disabled={{popDisabled}}>pop</button>

<h3>Toggle text</h3>
<a href="#" onclick='{{toggle}}'>Toggle <code>model.text</code></a>
<p>
Expand Down Expand Up @@ -308,6 280,28 @@ Showcase of all features, tests
<div><!-- {{{innerHTML}}} --></div>
<!-- `jtmpl` accepts tags in HTML comments and automatically strips them -->

<h3>Nested collections</h3>
<ul class="dummy-class just for the_test">
{{#collection}}
<li>
<h4><code>model.collection[i].inner</code></h4>
<ul>
{{#inner}}<li>{{.}}</li>{{/inner}}
{{^inner}}<li>&lt; empty &gt;</li>{{/inner}}
</ul>
&nbsp;
<button onclick={{innerPush}}>push</button>
<button onclick="{{innerPop}}" disabled={{popDisabled}}>pop</button>
</li>
{{/collection}}
{{^collection}}
<li>&lt; empty &gt;</li>
{{/collection}}
</ul>
<br>
<button onclick={{push}}>push</button>
<button onclick="{{pop}}" disabled={{popDisabled}}>pop</button>

</script>

<script>
Expand Down
66 changes: 29 additions & 37 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 27,12 @@ <h2>Why</h2>
</li>
<li><p>ideas by humans, automation by computers</p>
</li>
</ul>
<p>Other <a href="http://www.infoq.com/research/top-javascript-mvc-frameworks">JavaScript MV*</a> frameworks:</p>
<ul>
<li><p>require you explicitly specify (via code or DOM attributes) how to bind data to DOM nodes</p>
<li><p>extend the concept of a templating engine with the most essential feature of <a href="http://www.infoq.com/research/top-javascript-mvc-frameworks">JavaScript MV*</a> frameworks&mdash;<a href="http://en.wikipedia.org/wiki/Data_binding">data-binding</a></p>
</li>
<li><p>or invent JavaScript-based <a href="http://en.wikipedia.org/wiki/Domain-specific_language">DSL</a> to build the DOM</p>
<li><p>do not require explicit hooks, boilerplate initialization code or invent a <a href="http://en.wikipedia.org/wiki/Domain-specific_language">DSL</a> to build the DOM&mdash;template already contains relations between model properties and HTML tags (which result in DOM nodes), so leverage this</p>
</li>
<li><p><a href="http://emberjs.com">Ember</a> auto-updating Handlebars templates feature comes closest to what <code>jtmpl</code> is, but the templating syntax is more complex, it replaces HTML tags with custom tags. In contrast, <code>jtmpl</code>:</p>
<ul>
<li>augments HTML tags by adding Mustache tags, so it can bind to any property</li>
<li>also binds DOM events custom reactors</li>
<li>is tiny in comparison</li>
</ul>
</li>
</ul>
<p><code>jtmpl</code> enables you to focus on structure and data and not worry about DOM synchronization. Assuming you already know HTML, JavaScript and Mustache, the learning curve is basically non-existent. Check the <a href="kitchensink.html">Kitchensink demo</a>.</p>
<p><code>jtmpl</code> enables you to focus on structure and data and not worry about DOM synchronization. Assuming you already know HTML, JavaScript and Mustache, the learning curve is non-existent. Check the <a href="kitchensink.html">Kitchensink demo</a>.</p>
<h2>How</h2>
<ol>
<li><p>Compile template using a <code>model</code> object into a valid HTML string (with added metadata)</p>
Expand All @@ -59,7 49,7 @@ <h2>Hello, world</h2>

Hello, &lt;span data-jt=&quot;who&quot;&gt;server&lt;/span&gt;</code></pre>
<ul>
<li><code>Stage2</code> renders live DOM structure (think automatic <a href="http://en.wikipedia.org/wiki/Model–view–controller">MVC</a>):</li>
<li><code>Stage2</code> renders live DOM structure:</li>
</ul>
<iframe src="hello.html" style="border:0; border-left:1px dotted black; height:4em"></iframe>

Expand Down Expand Up @@ -128,7 118,7 @@ <h3>API</h3>
<li><p><code>jtmpl(&#39;#target-id&#39; or domElement, &#39;template contents or &quot;#template-id&quot;&#39;, model)</code>&mdash;compiles a template using <code>model</code>, injects it into target and binds it to <code>model</code>. </p>
<ul>
<li>template contents can be already prerendered by server to save the client some processing and help for SEO</li>
<li>if target is a script tag (of type=&quot;text/html&quot; or similar), then it is replaced with a div.</li>
<li>if target is a script tag (of type=&quot;text/html&quot; or similar), then it is replaced with a div. This makes possible directly converting a template, embedded in a clean way, into a DOM node</li>
</ul>
</li>
<li><p><em>Deprecated</em> <code>jtmpl(selector)</code>&mdash;returns an array, just a handy wrapper around <code>document.querySelectorAll</code>. Will remove this feature, as <code>jtmpl(string)</code> syntax will probably be used for something more consistent</p>
Expand All @@ -144,6 134,8 @@ <h3>Template specifics</h3>
</li>
<li><p>and the same goes for section items</p>
</li>
<li><p>all default enclosing tags are configurable</p>
</li>
<li><p><code>data-jt</code> attributes containing metadata for <code>Stage2</code> are injected in HTML elements</p>
</li>
<li><p><code>Stage1</code> also emits section structures (with changed delimiters) embedded in HTML comments</p>
Expand Down Expand Up @@ -205,28 197,6 @@ <h2>Kitchen Sink</h2>
Feel free to modify &lt;code&gt;model&lt;/code&gt; from JS console and observe changes.
&lt;/p&gt;

&lt;h3&gt;Nested collections&lt;/h3&gt;
&lt;ul class=&quot;dummy-class just for the_test&quot;&gt;
{{#collection}}
&lt;li&gt;
&lt;h4&gt;&lt;code&gt;model.collection[i].inner&lt;/code&gt;&lt;/h4&gt;
&lt;ul&gt;
{{#inner}}&lt;li&gt;{{.}}&lt;/li&gt;{{/inner}}
{{^inner}}&lt;li&gt;&amp;lt; empty &amp;gt;&lt;/li&gt;{{/inner}}
&lt;/ul&gt;
&amp;nbsp;
&lt;button onclick={{innerPush}}&gt;push&lt;/button&gt;
&lt;button onclick=&quot;{{innerPop}}&quot; disabled={{popDisabled}}&gt;pop&lt;/button&gt;
&lt;/li&gt;
{{/collection}}
{{^collection}}
&lt;li&gt;&amp;lt; empty &amp;gt;&lt;/li&gt;
{{/collection}}
&lt;/ul&gt;
&lt;br&gt;
&lt;button onclick={{push}}&gt;push&lt;/button&gt;
&lt;button onclick=&quot;{{pop}}&quot; disabled={{popDisabled}}&gt;pop&lt;/button&gt;

&lt;h3&gt;Toggle text&lt;/h3&gt;
&lt;a href=&quot;#&quot; onclick=&#39;{{toggle}}&#39;&gt;Toggle &lt;code&gt;model.text&lt;/code&gt;&lt;/a&gt;
&lt;p&gt;
Expand Down Expand Up @@ -280,6 250,28 @@ <h2>Kitchen Sink</h2>
&lt;div&gt;&lt;!-- {{{innerHTML}}} --&gt;&lt;/div&gt;
&lt;!-- `jtmpl` accepts tags in HTML comments and automatically strips them --&gt;

&lt;h3&gt;Nested collections&lt;/h3&gt;
&lt;ul class=&quot;dummy-class just for the_test&quot;&gt;
{{#collection}}
&lt;li&gt;
&lt;h4&gt;&lt;code&gt;model.collection[i].inner&lt;/code&gt;&lt;/h4&gt;
&lt;ul&gt;
{{#inner}}&lt;li&gt;{{.}}&lt;/li&gt;{{/inner}}
{{^inner}}&lt;li&gt;&amp;lt; empty &amp;gt;&lt;/li&gt;{{/inner}}
&lt;/ul&gt;
&amp;nbsp;
&lt;button onclick={{innerPush}}&gt;push&lt;/button&gt;
&lt;button onclick=&quot;{{innerPop}}&quot; disabled={{popDisabled}}&gt;pop&lt;/button&gt;
&lt;/li&gt;
{{/collection}}
{{^collection}}
&lt;li&gt;&amp;lt; empty &amp;gt;&lt;/li&gt;
{{/collection}}
&lt;/ul&gt;
&lt;br&gt;
&lt;button onclick={{push}}&gt;push&lt;/button&gt;
&lt;button onclick=&quot;{{pop}}&quot; disabled={{popDisabled}}&gt;pop&lt;/button&gt;

&lt;/script&gt;

&lt;script&gt;
Expand Down
Loading

0 comments on commit 98065b6

Please sign in to comment.