Permalink
Browse files

Major update with breaking changes.

Integrates with possible beta candidate for JsRender.
  • Loading branch information...
1 parent 667b56c commit bf3e4fe53c8007b720eb4ee5d0c785368d04b6fa @BorisMoore committed Mar 6, 2012
Showing with 1,996 additions and 15,693 deletions.
  1. +1 −1 MIT-LICENSE.txt
  2. +4 −3 README.md
  3. +12 −11 demos/index.html
  4. +9 −9 demos/jQueryConfDemosOct2011/01_render-template.html
  5. +6 −12 demos/jQueryConfDemosOct2011/02_template-from-string.html
  6. +9 −15 demos/jQueryConfDemosOct2011/03_compiled-template.html
  7. +9 −8 demos/jQueryConfDemosOct2011/04_data-array.html
  8. +11 −10 demos/jQueryConfDemosOct2011/05_input.html
  9. +26 −22 demos/jQueryConfDemosOct2011/06_data-binding.html
  10. +20 −12 demos/jQueryConfDemosOct2011/06_data-binding2.html
  11. +17 −12 demos/jQueryConfDemosOct2011/07_observable.html
  12. +16 −12 demos/jQueryConfDemosOct2011/07_observable2.html
  13. +33 −18 demos/jQueryConfDemosOct2011/07_observable3.html
  14. +23 −23 demos/jQueryConfDemosOct2011/{08_each-tag.html → 08_for-tag.html}
  15. +17 −17 demos/jQueryConfDemosOct2011/{08b_each-composition.html → 09_for-composition.html}
  16. +30 −30 demos/jQueryConfDemosOct2011/{09_if-else-tag.html → 10_if-else-tag.html}
  17. +66 −53 demos/jQueryConfDemosOct2011/{10_editable-data.html → 11_editable-data.html}
  18. +0 −248 demos/jQueryConfDemosOct2011/11_server-rendered_client-activated.html
  19. +27 −28 demos/jQueryConfDemosOct2011/{12_custom-helper-tags.html → 12_helper-functions.html}
  20. +31 −30 demos/jQueryConfDemosOct2011/13_allow-code.html
  21. +41 −43 demos/jQueryConfDemosOct2011/14_custom-tags.html
  22. BIN demos/jQueryConfDemosOct2011/datepicker/images/ui-bg_diagonals-thick_75_f3d8d8_40x40.png
  23. BIN demos/jQueryConfDemosOct2011/datepicker/images/ui-bg_dots-small_65_a6a6a6_2x2.png
  24. BIN demos/jQueryConfDemosOct2011/datepicker/images/ui-bg_flat_0_333333_40x100.png
  25. BIN demos/jQueryConfDemosOct2011/datepicker/images/ui-bg_flat_65_ffffff_40x100.png
  26. BIN demos/jQueryConfDemosOct2011/datepicker/images/ui-bg_flat_75_ffffff_40x100.png
  27. BIN demos/jQueryConfDemosOct2011/datepicker/images/ui-bg_glass_55_fbf8ee_1x400.png
  28. BIN demos/jQueryConfDemosOct2011/datepicker/images/ui-bg_glass_75_dadada_1x400.png
  29. BIN demos/jQueryConfDemosOct2011/datepicker/images/ui-bg_highlight-hard_100_eeeeee_1x100.png
  30. BIN demos/jQueryConfDemosOct2011/datepicker/images/ui-bg_highlight-hard_100_f6f6f6_1x100.png
  31. BIN demos/jQueryConfDemosOct2011/datepicker/images/ui-bg_highlight-soft_15_cc0000_1x100.png
  32. BIN demos/jQueryConfDemosOct2011/datepicker/images/ui-icons_004276_256x240.png
  33. BIN demos/jQueryConfDemosOct2011/datepicker/images/ui-icons_cc0000_256x240.png
  34. BIN demos/jQueryConfDemosOct2011/datepicker/images/ui-icons_ffffff_256x240.png
  35. +0 −408 demos/jQueryConfDemosOct2011/datepicker/jquery-ui-1.8.1.custom.css
  36. +0 −1,929 demos/jQueryConfDemosOct2011/datepicker/jquery-ui-1.8.1.custom.js
  37. BIN demos/jQueryConfDemosOct2011/eyeswideshut.jpg
  38. +7 −9 demos/jQueryConfDemosOct2011/index.html
  39. +0 −5 demos/jQueryConfDemosOct2011/resources/syntaxhighlighter.css
  40. +5 −2 demos/resources/demos.css
  41. +5 −7 demos/resources/masterdetail.css
  42. +24 −22 demos/step-by-step/01_rendering-and-linking.html
  43. +28 −31 demos/step-by-step/02_accordion_switching-template.html
  44. +10 −25 demos/step-by-step/03_tree-view_recursive-nested-each.html
  45. +66 −64 demos/step-by-step/04_editable-data.html
  46. +112 −93 demos/step-by-step/05_server-rendered_client-activated.html
  47. +29 −70 demos/step-by-step/06_top-level-linking.html
  48. +33 −29 demos/step-by-step/10_todos.html
  49. +0 −138 demos/step-by-step/11_todos-closure.html
  50. +8 −13 demos/step-by-step/index.html
  51. +0 −9,046 jquery-1.6.4.js
  52. +0 −26 jquery.bindall.js
  53. +0 −2 jquery.bindall.min.js
  54. +2 −2 jquery.observable.js
  55. +0 −2 jquery.observable.min.js
  56. +550 −809 jquery.views.js
  57. +709 −458 jsrender.js
  58. +0 −43 test/jsrender/01_local-data.html
  59. +0 −54 test/jsrender/02_html-tag.html
  60. +0 −60 test/jsrender/03_if-else-tag.html
  61. +0 −70 test/jsrender/04_each-tag.html
  62. +0 −83 test/jsrender/05_javascript.html
  63. +0 −68 test/jsrender/06_hierarchical-data.html
  64. +0 −100 test/jsrender/07_tabs-using-wrap-tag.html
  65. +0 −674 test/jsrender/conformance-suite.html
  66. +0 −13 test/jsrender/conformance.html
  67. +0 −152 test/perf-compare.html
  68. +0 −77 test/resources/dot.js
  69. +0 −484 test/resources/jquery.tmpl-JQT.js
  70. +0 −8 test/resources/perf-compare.css
View
@@ -1,4 +1,4 @@
-Copyright (c) 2011 Boris Moore https://github.com/BorisMoore/jsviews
+Copyright (c) 2012 Boris Moore https://github.com/BorisMoore/jsviews
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
View
@@ -1,7 +1,8 @@
## JsViews: Next-generation jQuery Templates
_Interactive data-driven views, built on top of JsRender templates_<br/>
-To view demo pages (on gh-branch) navigate to [http://borismoore.github.com/jsviews/demos/index.html](http://borismoore.github.com/jsviews/demos/index.html "JsViews Samples").
-See also [JsRender step-by-step samples](http://borismoore.github.com/jsrender/demos/index.html)
+To view demo pages (on gh-branch) navigate to [http://borismoore.github.com/jsviews/demos/index.html](http://borismoore.github.com/jsviews/demos/index.html "JsViews Samples").<br/>
+See also [JsRender step-by-step samples](http://borismoore.github.com/jsrender/demos/index.html).<br/>
+
+See [Approaching Beta: What's changing in JsRender and JsViews](http://www.borismoore.com/2012/03/approaching-beta-whats-changing-in_06.html) for documentation of changes.<br/>
**Warning:** JsViews is not yet Beta, and there may be frequent changes to APIs and features in the coming period.<br/>
-<font color="red">Recent breaking change:</font> JsRender: Parameter order change: `$.render( data, template )`
View
@@ -6,20 +6,21 @@
</head>
<body>
-<h2>JsViews: Next-generation jQuery Templates</h2>
+<h2>JsViews: Next-generation jQuery Templates and Data Linking</h2>
+<div class="subhead"><em>JsViews</em>:</div>
+<div class="box">
+<div class="desc">JsViews are interactive data-driven views, built on top of JsRender templates</div>
<div class="subhead"><b><a href="step-by-step/index.html">JsViews: step-by-step samples</a></b></div>
-<em>JsViews are Interactive data-driven views, built on top of JsRender templates</em>
-
-<div class="subhead"><b><a href="http://borismoore.github.com/jsrender/demos/index.html">JsRender: Demos</a></b></div>
-<em>JsRender templates are optimized for high-performance pure string-based rendering, without DOM or jQuery dependency</em><br />
-
<div class="subhead"><b><a href="jQueryConfDemosOct2011/index.html">jQuery Conference October 2011: Demo sequence</a></b></div>
-
-<div class="subhead">Perf tests</div>
- <a href="../test/perf-compare.html">Perf comparison</a>. (Wait... will not render immediately)<br />
-
-<br /><span class="subhead">Source code:</span>
+<span class="subhead">Source code:</span>
<a href="https://github.com/BorisMoore/jsviews">https://github.com/BorisMoore/jsviews</a>
+</div>
+
+<div class="subhead">See also on <em>JsRender</em> site:</div>
+<div class="box">
+<div class="desc">JsRender templates are optimized for high-performance pure string-based rendering, without DOM or jQuery dependency</div>
+<div class="subhead"><b><a href="http://borismoore.github.com/jsrender/demos/index.html">JsRender: Demos</a></b></div>
+</div>
</body>
</html>
@@ -17,9 +17,9 @@ <h3>1 Render template from script block</h3>
<table><tbody id="details"></tbody></table>
<!--====== Template ======-->
-<script id="personTmpl" type="text/x-jquery-tmpl">
+<script id="personTmpl" type="text/x-jsrender">
<tr>
- <td>{{=firstName}}</td>
+ <td>{{:firstName}}</td>
</tr>
</script>
@@ -28,7 +28,7 @@ <h3>1 Render template from script block</h3>
var person = {
firstName: "Jeff"
-}
+};
// Render to string
var html = $( "#personTmpl" ).render( person );
@@ -43,10 +43,10 @@ <h3>1 Render template from script block</h3>
<h4>HTML:</h4>
<pre class="brush: xml;">
<!--====== Template ======-->
-&lt;script id="personTmpl" type="text/x-jquery-tmpl">
- &lt;tr>
- &lt;td>{{=firstName}}&lt;/td>
- &lt;/tr>
+&lt;script id="personTmpl" type="text/x-jsrender">
+ &lt;tr>
+ &lt;td>{{:firstName}}&lt;/td>
+ &lt;/tr>
&lt;/script>
<!--====== Container ======-->
@@ -55,8 +55,8 @@ <h4>HTML:</h4>
<h4>Data:</h4>
<pre class="brush: js;">
var person = {
- firstName: "Jeff"
-}
+ firstName: "Jeff"
+};
</pre>
<h4>Script:</h4>
@@ -16,40 +16,34 @@ <h3>2 Render template from string</h3>
<!--====== Container ======-->
<table><tbody id="details"></tbody></table>
-<!--====== Template ======-->
-<script id="personTmpl" type="text/x-jquery-tmpl">
- <tr>
- <td>{{=firstName}}</td>
- </tr>
-</script>
-
<!--====== Script ======-->
<script type="text/javascript">
var person = {
firstName: "Jeff"
-}
+};
// Render to string
-var html = $.render( person, "<tr><td>{{=firstName}}</td></tr>" );
+var html = $.templates( "<tr><td>{{:firstName}}</td></tr>" ).render( person );
// Insert as HTML
$( "#details" ).html( html );
</script>
+
<!--================ End of Demo Section ================-->
<h4>Data:</h4>
<pre class="brush: js;">
var person = {
- firstName: "Jeff"
-}
+ firstName: "Jeff"
+};
</pre>
<h4>Script:</h4>
<pre class="brush: js;">
// Render to string
-var html = $.render( person, "&lt;tr>&lt;td>{{=firstName}}&lt;/td>&lt;/tr>" );
+var html = $.templates( "&lt;tr>&lt;td>{{:firstName}}&lt;/td>&lt;/tr>" ).render( person );
// Insert as HTML
$( "#details" ).html( html );
@@ -16,46 +16,40 @@ <h3>3 Compile template from string</h3>
<!--====== Container ======-->
<table><tbody id="details"></tbody></table>
-<!--====== Template ======-->
-<script id="personTmpl" type="text/x-jquery-tmpl">
- <tr>
- <td>{{=firstName}}</td>
- </tr>
-</script>
-
<!--====== Script ======-->
<script type="text/javascript">
var person = {
firstName: "Jeff"
-}
+};
-// Compile as named template
-$.template( "detailsTmpl", "<tr><td>{{=firstName}}</td></tr>" );
+// Compile from string, as named template
+$.templates( "detailsTmpl", "<tr><td>{{:firstName}}</td></tr>" );
// Render to string
-var html = $.render( person, "detailsTmpl" );
+var html = $.render.detailsTmpl( person );
// Insert as HTML
$( "#details" ).html( html );
</script>
+
<!--================ End of Demo Section ================-->
<h4>Data:</h4>
<pre class="brush: js;">
var person = {
- firstName: "Jeff"
-}
+ firstName: "Jeff"
+};
</pre>
<h4>Script:</h4>
<pre class="brush: js;">
// Compile as named template
-$.template( "detailsTmpl", "&lt;tr>&lt;td>{{=firstName}}&lt;/td>&lt;/tr>" );
+$.templates( "detailsTmpl", "&lt;tr>&lt;td>{{:firstName}}&lt;/td>&lt;/tr>" );
// Render to string
-var html = $.render( person, "detailsTmpl" );
+var html = $.render.detailsTmpl( person );
// Insert as HTML
$( "#details" ).html( html );
@@ -17,9 +17,9 @@ <h3>4 Data Arrays</h3>
<table><tbody id="details"></tbody></table>
<!--====== Template ======-->
-<script id="personTmpl" type="text/x-jquery-tmpl">
+<script id="personTmpl" type="text/x-jsrender">
<tr>
- <td>{{=firstName}}</td>
+ <td>{{:firstName}}</td>
</tr>
</script>
@@ -42,17 +42,18 @@ <h3>4 Data Arrays</h3>
$( "#details" ).html( html );
</script>
+
<!--================ End of Demo Section ================-->
<h4>Data:</h4>
<pre class="brush: js;">
var people = [
- {
- firstName: "Jeff"
- },
- {
- firstName: "Rebecca"
- }
+ {
+ firstName: "Jeff"
+ },
+ {
+ firstName: "Rebecca"
+ }
];
</pre>
@@ -17,10 +17,10 @@ <h3>5 Inputs</h3>
<table><tbody id="details"></tbody></table>
<!--====== Template ======-->
-<script id="personTmpl" type="text/x-jquery-tmpl">
+<script id="personTmpl" type="text/x-jsrender">
<tr>
- <td>{{=firstName}}</td>
- <td><input value="{{=firstName}}" /></td>
+ <td>{{:firstName}}</td>
+ <td><input value="{{:firstName}}" /></td>
</tr>
</script>
@@ -41,16 +41,17 @@ <h3>5 Inputs</h3>
);
</script>
+
<!--================ End of Demo Section ================-->
<h4>HTML:</h4>
-<pre class="brush: xml;">&lt;script id="personTmpl" type="text/x-jquery-tmpl">
- &lt;tr>
- &lt;td>{{=firstName}}&lt;/td>
- &lt;td>
- &lt;input value="{{=firstName}}" />
- &lt;/td>
- &lt;/tr>
+<pre class="brush: xml;">&lt;script id="personTmpl" type="text/x-jsrender">
+ &lt;tr>
+ &lt;td>{{:firstName}}&lt;/td>
+ &lt;td>
+ &lt;input value="{{:firstName}}" />
+ &lt;/td>
+ &lt;/tr>
&lt;/script></pre>
</body>
</html>
@@ -19,18 +19,17 @@ <h3>6 Data binding: JsViews</h3>
<table><tbody id="details"></tbody></table>
<!--====== Template ======-->
-<script id="personTmpl" type="text/x-jquery-tmpl">
+<script id="personTmpl" type="text/x-jsrender">
<tr>
- <td data-getfrom="[firstName]" />
+ <td data-link="firstName" />
<td>
- <input data-getfrom="[firstName]" data-to="[firstName]" />
+ <input data-link="firstName" />
</td>
</tr>
</script>
<!--====== Script ======-->
<script type="text/javascript">
-
var people = [
{
firstName: "Jeff"
@@ -40,46 +39,51 @@ <h3>6 Data binding: JsViews</h3>
}
];
+// Compile template
+$.templates( "personTmpl", "#personTmpl" );
+
// Render to string, and insert as HTML
-var html = $( "#personTmpl" ).render( people );
+$( "#details" ).html(
+ $.render.personTmpl( people )
+)
-// Insert as HTML ... and data-link to people
-$( "#details" )
- .html( html )
- .link( people );
+// ... and data-link to people
+$.link( "#details", people , {link:0});
</script>
+
<!--================ End of Demo Section ================-->
<h4>HTML:</h4>
<pre class="brush: xml;">
<!-- Template, with declarative data binding expressions -->
-...
- &lt;td data-getfrom="[firstName]" />
- &lt;td>
- &lt;input data-getfrom="[firstName]" data-to="[firstName]" />
- &lt;/td>
+...
+ &lt;td data-link="firstName" />
+ &lt;td>
+ &lt;input data-link="firstName" />
+ &lt;/td>
...
</pre>
<h4>Script:</h4>
<pre class="brush: js;">
+// Compile template
+$.templates( "personTmpl", "#personTmpl" );
+
// Render to string, and insert as HTML
-var html = $( "#personTmpl" ).render( people );
+$( "#details" ).html(
+ $.render.personTmpl( people )
+);
-// Insert as HTML ... and data-link to people
-$( "#details" )
- .html( html )
- .link( people );
+// ... and data-link to people
+$.link( "#details", people );
</pre>
<h4>Other possible data-binding paths:</h4>
<pre class="brush: xml;">
-&lt;input data-getfrom="title:fullName( manager[firstName], manager[lastName] )" ... />
+&lt;input data-link="{convert:manager.firstName:convertBack} title{:manager.firstName + manager.lastName}" ... />
</pre>
-
-
</body>
</html>
Oops, something went wrong.

0 comments on commit bf3e4fe

Please sign in to comment.