Skip to content

Commit

Permalink
Object.observe dependency removed
Browse files Browse the repository at this point in the history 
Object.defineProperty is used instead. Only implementing mutable array methods left.
  • Loading branch information
@atmin
atmin committed Sep 21, 2013
1 parent 461621f commit 8e0c01e
Show file tree
Hide file tree
Showing 6 changed files with 345 additions and 399 deletions.
87 changes: 43 additions & 44 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,41 1,44 @@
_`{{`_ `jtmpl` _`}}`_
=====================

#### Humanistic JavaScript MVC framework
### Live templates



<br>
_[Kitchensink](kitchensink.html) demo is working. First release coming very soon, after resolving a couple of bugs_


What
----

`jtmpl` is a DOM-aware templating engine. It renders a [Mustache](http://mustache.github.io) HTML template using a `model` object and infers bindings from template structure, so when `model` changes DOM is updated accordingly and vice versa.

There's never need to touch the DOM directly, `model` is the [single source of truth](http://en.wikipedia.org/wiki/Single_Source_of_Truth)

Other JavaScript MV* frameworks require you either:

* explicitly specify (via code or DOM element attributes) how to do the binding

* build DOM via code :(

`jtmpl` provides you _live_ templates that just work.



Why
---

* embrace [KISS](http://en.wikipedia.org/wiki/Keep_it_simple) and [DRY](http://en.wikipedia.org/wiki/Don't_repeat_yourself)

* write least amount of code possible
* write least amount of code possible, enjoy conceptual simplicity

* ideas by humans, automation by computers


Other [JavaScript MV*](http://www.infoq.com/research/top-javascript-mvc-frameworks) frameworks:

* 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).




How
---
Expand Down Expand Up @@ -63,7 66,7 @@ Hello, world

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

<!-- [Link to example](hello.html) -->
<iframe src="hello.html" style="border:0; border-left:1px dotted black; height:4em"></iframe>


$ hello.html
Expand Down Expand Up @@ -104,22 107,18 @@ Hello, world
</body>
</html>

<iframe src="hello.html"></iframe>





Specifications
--------------

* based on [Object.observe](http://updates.html5rocks.com/2012/11/Respond-to-change-with-Object-observe)

* no dependencies, [polyfill](https://github.com/jdarling/Object.observe) built-in
* no dependencies

* less than 5KB minified and gzipped

* Firefox, Chrome, Opera, IE 9 (IE8 requires Array.isArray, Array.map, Function.bind and String.trim [polyfills](http://stackoverflow.com/questions/2795001/fixing-javascript-array-functions-in-internet-explorer-indexof-foreach-etc))
* Firefox, Chrome, Opera, IE 9



Expand Down Expand Up @@ -234,6 233,28 @@ 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 @@ -287,36 308,14 @@ 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>
model = {
text: 'lowercase',

collection: [
{ popDisabled: false, inner: [1, 2, 3] },
{ popDisabled: false, inner: [1, 2, 3, 4, 5] },
{ popDisabled: false, inner: [6, 7] },
{ popDisabled: false, inner: [8, 9, 10, 11] }
],
Expand Down
87 changes: 42 additions & 45 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,29 15,34 @@
<body>
<a href="https://github.com/atmin/jtmpl"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
<h1><em><code>{{</code></em> <code>jtmpl</code> <em><code>}}</code></em></h1>
<h4>Humanistic JavaScript MVC framework</h4>
<p><br>
<em><a href="kitchensink.html">Kitchensink</a> demo is working. First release coming very soon, after resolving a couple of bugs</em></p>
<h3>Live templates</h3>
<h2>What</h2>
<p><code>jtmpl</code> is a DOM-aware templating engine. It renders a <a href="http://mustache.github.io">Mustache</a> HTML template using a <code>model</code> object and infers bindings from template structure, so when <code>model</code> changes DOM is updated accordingly and vice versa. </p>
<p>There&#39;s never need to touch the DOM directly, <code>model</code> is the <a href="http://en.wikipedia.org/wiki/Single_Source_of_Truth">single source of truth</a></p>
<p>Other JavaScript MV* frameworks require you either:</p>
<h2>Why</h2>
<ul>
<li><p>explicitly specify (via code or DOM element attributes) how to do the binding</p>
<li><p>embrace <a href="http://en.wikipedia.org/wiki/Keep_it_simple">KISS</a> and <a href="http://en.wikipedia.org/wiki/Don&#39;t_repeat_yourself">DRY</a></p>
</li>
<li><p>build DOM via code :(</p>
<li><p>write least amount of code possible, enjoy conceptual simplicity</p>
</li>
<li><p>ideas by humans, automation by computers</p>
</li>
</ul>
<p><code>jtmpl</code> provides you <em>live</em> templates that just work.</p>
<h2>Why</h2>
<p>Other <a href="http://www.infoq.com/research/top-javascript-mvc-frameworks">JavaScript MV*</a> frameworks:</p>
<ul>
<li><p>embrace <a href="http://en.wikipedia.org/wiki/Keep_it_simple">KISS</a> and <a href="http://en.wikipedia.org/wiki/Don&#39;t_repeat_yourself">DRY</a></p>
<li><p>require you explicitly specify (via code or DOM attributes) how to bind data to DOM nodes</p>
</li>
<li><p>write least amount of code possible</p>
<li><p>or invent JavaScript-based <a href="http://en.wikipedia.org/wiki/Domain-specific_language">DSL</a> to build the DOM</p>
</li>
<li><p>ideas by humans, automation by computers</p>
<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>
<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 @@ -56,7 61,7 @@ <h2>Hello, world</h2>
<ul>
<li><code>Stage2</code> renders live DOM structure (think automatic <a href="http://en.wikipedia.org/wiki/Model–view–controller">MVC</a>):</li>
</ul>
<!-- [Link to example](hello.html) -->
<iframe src="hello.html" style="border:0; border-left:1px dotted black; height:4em"></iframe>


<pre><code>$ hello.html
Expand Down Expand Up @@ -96,21 101,13 @@ <h2>Hello, world</h2>
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<iframe src="hello.html"></iframe>





<h2>Specifications</h2>
<ul>
<li><p>based on <a href="http://updates.html5rocks.com/2012/11/Respond-to-change-with-Object-observe">Object.observe</a></p>
</li>
<li><p>no dependencies, <a href="https://github.com/jdarling/Object.observe">polyfill</a> built-in</p>
<li><p>no dependencies</p>
</li>
<li><p>less than 5KB minified and gzipped</p>
</li>
<li><p>Firefox, Chrome, Opera, IE 9 (IE8 requires Array.isArray, Array.map, Function.bind and String.trim <a href="http://stackoverflow.com/questions/2795001/fixing-javascript-array-functions-in-internet-explorer-indexof-foreach-etc">polyfills</a>)</p>
<li><p>Firefox, Chrome, Opera, IE 9 </p>
</li>
</ul>
<h2>Downloads</h2>
Expand Down Expand Up @@ -208,6 205,28 @@ <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 @@ -261,36 280,14 @@ <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;
model = {
text: &#39;lowercase&#39;,

collection: [
{ popDisabled: false, inner: [1, 2, 3] },
{ popDisabled: false, inner: [1, 2, 3, 4, 5] },
{ popDisabled: false, inner: [6, 7] },
{ popDisabled: false, inner: [8, 9, 10, 11] }
],
Expand Down
Loading

0 comments on commit 8e0c01e

Please sign in to comment.