Question

For some reason I can’t seem to get my template to update after I filter? My filtering works, 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>&nbsp; &nbsp;<span>Room:
          </span><span><b>${Room}</b></span></div>
        <div>
          <span>Building Access: </span><span><b>${BuildingAccess}</b></span>&nbsp;
          &nbsp;<span>Room Access: </span><span><b>${RoomAccess}</b></span></div>
        <div>
          <span>Access Type: </span><span><b>${AccessType}</b></span>&nbsp; &nbsp;<span>After
            Hours: </span><span><b>${AfterHours}</b></span></div>
        <div>
          <span>Notes: </span><span><b>${Notes}</b></span></div>
      </div>
    </div>
  </li>
</script>

Answer 1

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.