Test JsViews refresh for nested {{for}} and {{if}}

Test JsViews refresh for nested {{for}} and {{if}}

by BorisMoore

HTML

<script src="http://borismoore.github.com/jsviews/jquery.observable.js"></script>
<script src="http://borismoore.github.com/jsviews/jsrender.js"></script>
<script src="http://borismoore.github.com/jsviews/jquery.views.js"></script>
Set the drop-downs to 'two', and click on the 3rd or 5th buttons. The 3rd 4th and 5th drop-downs revert to 'one. These are the three that are within the view that was clicked.<table><tbody id="details"></tbody></table>

<script id="template" type="text/x-jsrender">
 <tr><td id="outer"><button class="btn">refresh this view</button><select><option>one</option><option>two</option></select>outer</td></tr>
    {{for #data}}
        <tr><td id="inner"><button class="btn">refresh this view</button><select><option>one</option><option>two</option></select>inner</td></tr>
    {{/for}}
    {{for #data}}
        <tr><td id="innernexttoif"><button class="btn">refresh this view</button><select><option>one</option><option>two</option></select>innernexttoif</td></tr>
        {{if true}}
        <tr><td id="innerinif"><button class="btn">refresh this view</button><select><option>one</option><option>two</option></select>innerinif</td></tr>
        {{/if}}
        <tr><td id="innernexttoif"><button class="btn">refresh this view</button><select><option>one</option><option>two</option></select>innernexttoif</td></tr>
    {{/for}}
    <tr><td id="outer2"><button class="btn">refresh this view</button><select><option>one</option><option>two</option></select>outer2</td></tr></script>

CSS

table { border-collapse:collapse; border:2px solid blue; width:400px; margin:8px; }
table td { border:1px solid blue; color:blue; background-color:#f8f8f8; padding:3px; }
input { width: 98%; }

JavaScript

$("#details").on("click", ".btn", function() {
        $.view(this).refresh();
    });
    $.templates( "tmpl", "#template" ).link( "#details", {});