Skip to content

Commit

Permalink
Major update with breaking changes.
Browse files Browse the repository at this point in the history 
Integrates with possible beta candidate for JsRender.
  • Loading branch information
@BorisMoore
BorisMoore committed Mar 6, 2012
1 parent 667b56c commit bf3e4fe
Show file tree
Hide file tree
Showing 70 changed files with 1,996 additions and 15,693 deletions.
2 changes: 1 addition & 1 deletion MIT-LICENSE.txt
View file
@@ -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 Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the a copy of this software and associated documentation files (the
Expand Down
7 changes: 4 additions & 3 deletions README.md
View file
@@ -1,7 +1,8 @@
## JsViews: Next-generation jQuery Templates ## JsViews: Next-generation jQuery Templates
_Interactive data-driven views, built on top of JsRender templates_<br/> _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"). 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) 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/> **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 )`
23 changes: 12 additions & 11 deletions demos/index.html
View file
Expand Up @@ -6,20 +6,21 @@
</head> </head>
<body> <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> <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"><b><a href="jQueryConfDemosOct2011/index.html">jQuery Conference October 2011: Demo sequence</a></b></div>

<span class="subhead">Source code:</span>
<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>
<a href="https://github.com/BorisMoore/jsviews">https://github.com/BorisMoore/jsviews</a> <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> </body>
</html> </html>
18 changes: 9 additions & 9 deletions demos/jQueryConfDemosOct2011/01_render-template.html
View file
Expand Up @@ -17,9 +17,9 @@ <h3>1 Render template from script block</h3>
<table><tbody id="details"></tbody></table> <table><tbody id="details"></tbody></table>


<!--====== Template ======--> <!--====== Template ======-->
<script id="personTmpl" type="text/x-jquery-tmpl"> <script id="personTmpl" type="text/x-jsrender">
<tr> <tr>
<td>{{=firstName}}</td> <td>{{:firstName}}</td>
</tr> </tr>
</script> </script>


Expand All @@ -28,7 +28,7 @@ <h3>1 Render template from script block</h3>


var person = { var person = {
firstName: "Jeff" firstName: "Jeff"
} };


// Render to string // Render to string
var html = $( "#personTmpl" ).render( person ); var html = $( "#personTmpl" ).render( person );
Expand All @@ -43,10 +43,10 @@ <h3>1 Render template from script block</h3>
<h4>HTML:</h4> <h4>HTML:</h4>
<pre class="brush: xml;"> <pre class="brush: xml;">
<!--====== Template ======--> <!--====== Template ======-->
&lt;script id="personTmpl" type="text/x-jquery-tmpl"> &lt;script id="personTmpl" type="text/x-jsrender">
&lt;tr> &lt;tr>
&lt;td>{{=firstName}}&lt;/td> &lt;td>{{:firstName}}&lt;/td>
&lt;/tr> &lt;/tr>
&lt;/script> &lt;/script>


<!--====== Container ======--> <!--====== Container ======-->
Expand All @@ -55,8 +55,8 @@ <h4>HTML:</h4>
<h4>Data:</h4> <h4>Data:</h4>
<pre class="brush: js;"> <pre class="brush: js;">
var person = { var person = {
firstName: "Jeff" firstName: "Jeff"
} };
</pre> </pre>


<h4>Script:</h4> <h4>Script:</h4>
Expand Down
18 changes: 6 additions & 12 deletions demos/jQueryConfDemosOct2011/02_template-from-string.html
View file
Expand Up @@ -16,40 +16,34 @@ <h3>2 Render template from string</h3>
<!--====== Container ======--> <!--====== Container ======-->
<table><tbody id="details"></tbody></table> <table><tbody id="details"></tbody></table>


<!--====== Template ======-->
<script id="personTmpl" type="text/x-jquery-tmpl">
<tr>
<td>{{=firstName}}</td>
</tr>
</script>

<!--====== Script ======--> <!--====== Script ======-->
<script type="text/javascript"> <script type="text/javascript">


var person = { var person = {
firstName: "Jeff" firstName: "Jeff"
} };


// Render to string // 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 // Insert as HTML
$( "#details" ).html( html ); $( "#details" ).html( html );


</script> </script>

<!--================ End of Demo Section ================--> <!--================ End of Demo Section ================-->


<h4>Data:</h4> <h4>Data:</h4>
<pre class="brush: js;"> <pre class="brush: js;">
var person = { var person = {
firstName: "Jeff" firstName: "Jeff"
} };
</pre> </pre>


<h4>Script:</h4> <h4>Script:</h4>
<pre class="brush: js;"> <pre class="brush: js;">
// Render to string // 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 // Insert as HTML
$( "#details" ).html( html ); $( "#details" ).html( html );
Expand Down
24 changes: 9 additions & 15 deletions demos/jQueryConfDemosOct2011/03_compiled-template.html
View file
Expand Up @@ -16,46 +16,40 @@ <h3>3 Compile template from string</h3>
<!--====== Container ======--> <!--====== Container ======-->
<table><tbody id="details"></tbody></table> <table><tbody id="details"></tbody></table>


<!--====== Template ======-->
<script id="personTmpl" type="text/x-jquery-tmpl">
<tr>
<td>{{=firstName}}</td>
</tr>
</script>

<!--====== Script ======--> <!--====== Script ======-->
<script type="text/javascript"> <script type="text/javascript">


var person = { var person = {
firstName: "Jeff" firstName: "Jeff"
} };


// Compile as named template // Compile from string, as named template
$.template( "detailsTmpl", "<tr><td>{{=firstName}}</td></tr>" ); $.templates( "detailsTmpl", "<tr><td>{{:firstName}}</td></tr>" );


// Render to string // Render to string
var html = $.render( person, "detailsTmpl" ); var html = $.render.detailsTmpl( person );


// Insert as HTML // Insert as HTML
$( "#details" ).html( html ); $( "#details" ).html( html );


</script> </script>

<!--================ End of Demo Section ================--> <!--================ End of Demo Section ================-->


<h4>Data:</h4> <h4>Data:</h4>
<pre class="brush: js;"> <pre class="brush: js;">
var person = { var person = {
firstName: "Jeff" firstName: "Jeff"
} };
</pre> </pre>


<h4>Script:</h4> <h4>Script:</h4>
<pre class="brush: js;"> <pre class="brush: js;">
// Compile as named template // 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 // Render to string
var html = $.render( person, "detailsTmpl" ); var html = $.render.detailsTmpl( person );


// Insert as HTML // Insert as HTML
$( "#details" ).html( html ); $( "#details" ).html( html );
Expand Down
17 changes: 9 additions & 8 deletions demos/jQueryConfDemosOct2011/04_data-array.html
View file
Expand Up @@ -17,9 +17,9 @@ <h3>4 Data Arrays</h3>
<table><tbody id="details"></tbody></table> <table><tbody id="details"></tbody></table>


<!--====== Template ======--> <!--====== Template ======-->
<script id="personTmpl" type="text/x-jquery-tmpl"> <script id="personTmpl" type="text/x-jsrender">
<tr> <tr>
<td>{{=firstName}}</td> <td>{{:firstName}}</td>
</tr> </tr>
</script> </script>


Expand All @@ -42,17 +42,18 @@ <h3>4 Data Arrays</h3>
$( "#details" ).html( html ); $( "#details" ).html( html );


</script> </script>

<!--================ End of Demo Section ================--> <!--================ End of Demo Section ================-->


<h4>Data:</h4> <h4>Data:</h4>
<pre class="brush: js;"> <pre class="brush: js;">
var people = [ var people = [
{ {
firstName: "Jeff" firstName: "Jeff"
}, },
{ {
firstName: "Rebecca" firstName: "Rebecca"
} }
]; ];
</pre> </pre>


Expand Down
21 changes: 11 additions & 10 deletions demos/jQueryConfDemosOct2011/05_input.html
View file
Expand Up @@ -17,10 +17,10 @@ <h3>5 Inputs</h3>
<table><tbody id="details"></tbody></table> <table><tbody id="details"></tbody></table>


<!--====== Template ======--> <!--====== Template ======-->
<script id="personTmpl" type="text/x-jquery-tmpl"> <script id="personTmpl" type="text/x-jsrender">
<tr> <tr>
<td>{{=firstName}}</td> <td>{{:firstName}}</td>
<td><input value="{{=firstName}}" /></td> <td><input value="{{:firstName}}" /></td>
</tr> </tr>
</script> </script>


Expand All @@ -41,16 +41,17 @@ <h3>5 Inputs</h3>
); );


</script> </script>

<!--================ End of Demo Section ================--> <!--================ End of Demo Section ================-->


<h4>HTML:</h4> <h4>HTML:</h4>
<pre class="brush: xml;">&lt;script id="personTmpl" type="text/x-jquery-tmpl"> <pre class="brush: xml;">&lt;script id="personTmpl" type="text/x-jsrender">
&lt;tr> &lt;tr>
&lt;td>{{=firstName}}&lt;/td> &lt;td>{{:firstName}}&lt;/td>
&lt;td> &lt;td>
&lt;input value="{{=firstName}}" /> &lt;input value="{{:firstName}}" />
&lt;/td> &lt;/td>
&lt;/tr> &lt;/tr>
&lt;/script></pre> &lt;/script></pre>
</body> </body>
</html> </html>
Expand Down
48 changes: 26 additions & 22 deletions demos/jQueryConfDemosOct2011/06_data-binding.html
View file
Expand Up @@ -19,18 +19,17 @@ <h3>6 Data binding: JsViews</h3>
<table><tbody id="details"></tbody></table> <table><tbody id="details"></tbody></table>


<!--====== Template ======--> <!--====== Template ======-->
<script id="personTmpl" type="text/x-jquery-tmpl"> <script id="personTmpl" type="text/x-jsrender">
<tr> <tr>
<td data-getfrom="[firstName]" /> <td data-link="firstName" />
<td> <td>
<input data-getfrom="[firstName]" data-to="[firstName]" /> <input data-link="firstName" />
</td> </td>
</tr> </tr>
</script> </script>


<!--====== Script ======--> <!--====== Script ======-->
<script type="text/javascript"> <script type="text/javascript">

var people = [ var people = [
{ {
firstName: "Jeff" firstName: "Jeff"
Expand All @@ -40,46 +39,51 @@ <h3>6 Data binding: JsViews</h3>
} }
]; ];


// Compile template
$.templates( "personTmpl", "#personTmpl" );

// Render to string, and insert as HTML // 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 // ... and data-link to people
$( "#details" ) $.link( "#details", people , {link:0});
.html( html )
.link( people );


</script> </script>

<!--================ End of Demo Section ================--> <!--================ End of Demo Section ================-->


<h4>HTML:</h4> <h4>HTML:</h4>
<pre class="brush: xml;"> <pre class="brush: xml;">
<!-- Template, with declarative data binding expressions --> <!-- Template, with declarative data binding expressions -->
... ...
&lt;td data-getfrom="[firstName]" /> &lt;td data-link="firstName" />
&lt;td> &lt;td>
&lt;input data-getfrom="[firstName]" data-to="[firstName]" /> &lt;input data-link="firstName" />
&lt;/td> &lt;/td>
... ...
</pre> </pre>


<h4>Script:</h4> <h4>Script:</h4>
<pre class="brush: js;"> <pre class="brush: js;">
// Compile template
$.templates( "personTmpl", "#personTmpl" );

// Render to string, and insert as HTML // 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 // ... and data-link to people
$( "#details" ) $.link( "#details", people );
.html( html )
.link( people );
</pre> </pre>




<h4>Other possible data-binding paths:</h4> <h4>Other possible data-binding paths:</h4>
<pre class="brush: xml;"> <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> </pre>


</body> </body>
</html> </html>


0 comments on commit bf3e4fe

Please sign in to comment.