jQuery Templating won't update/refresh?
For some reason I can't seem to get my template to update after I filter? My filtering wo开发者_StackOverflowrks, but for some reason the template won't update? Any thoughts?
Here is a jsfiddle link that show the issues I'm having. It is not exact, but it gets the point across. jsfiddle
Just another edit. When I manually send in an array of objects instead of test, it works fine? e.g.
Doesn't work:
$.tmpl(summaryTemplate, test).appendTo("#buildings");
Works:
$.tmpl(summaryTemplate, [{"Device" : "Device11"}, {"Device" : "Device12"}]).appendTo("#buildings"); <---works
<script type="text/javascript">
var buildings = [];
$.template( "summaryTemplate", $('#summaryTemplate'));
$(function () {
var xhr = $.getJSON('/GetBuildings', { id: 4 });
xhr.success(function(data) {
buildings = data;
$.tmpl(summaryTemplate, buildings).appendTo( "#buildings" );
});
$('#device').keyup(function() {
var text = this.value;
var test = $(buildings).filter(function() {
return (this.Device.toLowerCase().indexOf(text.toLowerCase()) != -1);
});
$('#buildingCount').text(test.length);
$.tmpl(summaryTemplate, test).appendTo("#buildings");
});
});
</script>
<script id="summaryTemplate" type="text/x-jquery-tmpl">
<li class="device">
${Device}
<div style="display: none;">
<div class="slider">
<div>
<span>Building: </span><span><b>${Building}</b></span> <span>Room:
</span><span><b>${Room}</b></span></div>
<div>
<span>Building Access: </span><span><b>${BuildingAccess}</b></span>
<span>Room Access: </span><span><b>${RoomAccess}</b></span></div>
<div>
<span>Access Type: </span><span><b>${AccessType}</b></span> <span>After
Hours: </span><span><b>${AfterHours}</b></span></div>
<div>
<span>Notes: </span><span><b>${Notes}</b></span></div>
</div>
</div>
</li>
</script>
After working on this for quite awhile I finally figured it out. The .filter() method returns back a jquery object. I had to do test.toArray() when sending it to the template and everything worked like it was supposed to.
精彩评论