The JayData Handlebars module adds a number of Handlebars helpers that you can use in your templates to display and work with data. Read this post for the details on how to use Handlebars templates in JayData.
The {{renderEntity}} helper
This helper invokes the JayData entity rendering engine and is a conduit to invoke item.render() from within a template.
The following example creates a Todo type, adds two new items to the default item store, displays them with the template “newItemsTemplate”, then gets all items from the store and displays then with the “allItemsTemplate”. In both cases the {{renderEntity}} helper uses the default type based template (unless a template name or code is specified) to display individual items.
Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="kwrd">var</span> Todo = $data.define(<span class="str">"<strong><span style="font-size: medium;">Todo</span></strong>"</span>, { Task: String, Completed: Boolean, DueDate: Date }); $(<span class="kwrd">function</span> () { $data(<span class="str">"Todo"</span>) .addMany([{ Task: <span class="str">"T1"</span> }, { Task: <span class="str">"T2"</span> }]) .then($data.renderTo(<span class="str">"#todos"</span>, <span class="str">"newItemsTemplate"</span>,<span class="str">"append"</span>)) .then($data(<span class="str">"Todo"</span>).readAll) .then($data.renderTo(<span class="str">"#todos"</span>, <span class="str">"allItemsTemplate"</span>,<span class="str">"append"</span>)); }); |
Markup:
|
1 2 3 4 5 6 7 8 |
<script id="Todo" type="text/x-handlebars"> <li>{{Id}}, {{Task}}</li> </script> <script id="newItemsTemplate" type="text/x-handlebars"> <h3>New items!</h3> <ul> {{#each .}} |
{{renderEntity }}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{{/each}} </ul> <span class="kwrd"></</span><span class="html">script</span><span class="kwrd">></span> <script id=<span class="str">"allItemsTemplate"</span> type=<span class="str">"text/x-handlebars"</span>> <h3>All items, cound: {{length}}</h3> <ul> {{#each .}} <strong><span style="font-size: medium;">{{renderEntity }}</span></strong> {{/each}} </ul> <span class="kwrd"></</span><span class="html">script</span><span class="kwrd">></span> <span class="kwrd"><</span><span class="html">div</span> <span class="attr">id</span><span class="kwrd">="todos"</span><span class="kwrd">></span> <span class="kwrd"></</span><span class="html">div</span><span class="kwrd">></span> |
Result:
Using renderEntity with named templates
Code:
|
1 2 |
$data(<span class="str">"Todo"</span>).renderTo(<span class="str">"#todos"</span>, <span class="str">"TodoArrayTemplate"</span>); |
Markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="kwrd"><</span><span class="html">script</span> <span class="attr">id</span><span class="kwrd">="<strong><span style="font-size: medium;">CustomTodoTemplate</span></strong>"</span> <span class="attr">type</span><span class="kwrd">="text/x-handlebars"</span><span class="kwrd">></span> <li>{{Id}}, {{Task}}</li> <span class="kwrd"></</span><span class="html">script</span><span class="kwrd">></span> <script id=<span class="str">"TodoArrayTemplate"</span> type=<span class="str">"text/x-handlebars"</span>> <h3>All items, cound: {{length}}</h3> <ul> {{#each .}} <strong><span style="font-size: medium;">{{renderEntity <span class="str">'CustomTodoTemplate'</span>}}</span></strong> {{/each}} </ul> <span class="kwrd"></</span><span class="html">script</span><span class="kwrd">></span> <span class="kwrd"><</span><span class="html">div</span> <span class="attr">id</span><span class="kwrd">="todos"</span><span class="kwrd">></span><span class="kwrd"></</span><span class="html">div</span><span class="kwrd">></span> |
The {{entityCommand}} helper
The {{entityCommand}} helper provides for simple model driven UI events. Annotate any elements with the {{entityCommand}} helper passing a helper function name to get a callback with the actual data when the user clicks the given element. Callback method names must follow the ‘command’ + ‘Typename’ logic.
The following code implements a simple master detail scenario. First all Todo items are displayed. When the user clicks on a Todo a detailed view of that Todo item is displayed.
|
1 2 3 4 5 |
$data(<span class="str">"Todo"</span>).renderItemsTo(<span class="str">"#todos"</span>); $data(<span class="str">"Todo"</span>).<strong><span style="font-size: medium;">addCommandHandler</span></strong>("showDetails",<span class="kwrd">function</span> (todo) { todo.renderTo(<span class="str">"#selectedTodo"</span>, <span class="str">"TodoDetails"</span>); }); |
Markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="kwrd"><</span><span class="html">script</span> <span class="attr">id</span><span class="kwrd">="Todo"</span> <span class="attr">type</span><span class="kwrd">="text/x-handlebars"</span><span class="kwrd">></span> <li><a href=<span class="str">"#"</span> <strong><span style="font-size: medium;">{{entityCommand <span class="str">'showDetails'</span>}}</span></strong>>{{Task}}</a></li> <span class="kwrd"></</span><span class="html">script</span><span class="kwrd">></span> <script id=<span class="str">"TodoDetails"</span> type=<span class="str">"text/x-handlebars"</span>> <div>Id:{{Id}}</div> <div>Task:{{Task}}</div> <div>{{#<span class="kwrd">if</span> Completed}}<input type=<span class="str">"checkbox"</span> <span class="kwrd">checked</span> />{{/<span class="kwrd">if</span>}} <span class="kwrd"></</span><span class="html">script</span><span class="kwrd">></span> <span class="kwrd"><</span><span class="html">ul</span> <span class="attr">id</span><span class="kwrd">="todos"</span><span class="kwrd">></</span><span class="html">ul</span><span class="kwrd">></span> <span class="kwrd"><</span><span class="html">div</span> <span class="attr">id</span><span class="kwrd">="selectedTodo"</span><span class="kwrd">></</span><span class="html">div</span><span class="kwrd">></span> |
