BorisMoore/jsviews — Issue #35: Update rendered content of #if-else without re-rendering the template itself
Author: seagile2
Created: 2012-02-08 15:55:27+00:00
State: open

If I have an {{#if}}... {{else}} ... {{/if}} block in a template and somewhere in the javascript code I make a "setProperty" method call on a data property that my {{#if}}/{{else}} code uses for rendering some texts, then I have to call the render() method on the view so that the {{#if}}/{{else}} block is evaluated again with the new data property value (because the template itself is rendered again).

Here is my sample code:

<script id="myTemplate" type="text/x-jquery-tmpl">
<tr>
<td data-getfrom="[Age]"></td> @*This td will be updated without calling "render()" on the view.*@
<td> @*But this td will not be updated without calling "render()" on the view:*@
{{#if Age > 25}}
Greater!
{{else}}
Not greater!
{{/if}}
</td>
<td><input type="button" id="btnSetAgeProperty" value="Set age property"/></td>
</tr>
</script>

<table>
<tbody>
<tr>
<th>Age</th>
<th>Is greater than 25?</th>
<th>Set age property</th>
</tr>
</tbody>
<tbody id="myList">
</tbody>
</table>

<script type="text/javascript">
var ages = [{ Age: 5 }];
var myTemplate = $("#myTemplate").template();
$("#myList").link(ages, myTemplate)
.delegate("#btnSetAgeProperty", "click", function () {
$.observable($.view(this).data).setProperty("Age", 30);
$.view(this).render(); // This needs to be called for the "Greater"/"Not greater" text to be updated!
});
</script>

Is it possible that the content of the {{#if}}/{{else}} block (the "Greater"/"Not greater" text) is refreshed without calling the
$.view(this).render() anyway?