jquery template not refreshing data

Question

Я использую шаблон jquery для загрузки данных из службы WCF. Смотрите ниже код

function loadTableDetails(id) { 

    var input = 
    { 
     Id: id, 
    }; 
    self.TableDetailList([]); 
    return $.ajax({ 
     url: "../Service/Table/TableList", 
     type: "PUT", 
     contentType: 'application/json', 
     processData: false, 
     data: JSON.stringify(input), 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
      alert(errorThrown); 
     }, 
     success: function(allData) { 
      var mappedData = $.map(allData, function(item) { 

       return new TableDetailData(item); 
      }); 

      self.TableDetailList(mappedData); 
      $("#instructorTemplate").tmpl(self.TableDetailList()) 
            .appendTo("#instructorsList"); 


     } 
    }); 

} 

Меня связывают его для просмотра, как показано ниже

<table id="Table1" style="width: 100%;"> 
    <colgroup> 
     <col class="tblResultsCol1" style="width: 20px" /> 
     <col class="tblResultsCol2" style="width: 80px" /> 

     <col /> 
    </colgroup> 
    <script id="instructorTemplate" type="text/x-jquery-tmpl"> 

     <tr> 


      <td style="padding: 0px; text-align: left">${Id}</td> 
      <td style="padding: 0px;">${ListName}</td> 

     </tr> 
    </script> 

    <tbody id="instructorsList"> 
    </tbody> 
</table> 

Я называю эту функцию loadTableDetails на события нажатия кнопки и передать Id от выбранного элемента ComboBox. Он правильно загружает данные в первый раз. Но когда пользователь выбирает другой элемент в combox, он добавляет данные из старого результата в новый результат. Короче говоря, он продолжает добавлять данные из предыдущего результата. Я также пытался очистить наблюдаемый массив self.TableDetailList([]), прежде чем снова позвонить в службу, но это не поможет.

Любые идеи?

Answer 1

С использованием в appendTo в строке

$("#instructorTemplate").tmpl(self.TableDetailList()) 
         .appendTo("#instructorsList"); 

вы всегда добавляющая к существующей таблице, так что новые записи всегда добавляются в конец, а старые не удаляются.

Так что вам нужно empty() вашей цели, а затем добавить новые значения:

$("#instructorsList") 
    .empty() 
    .append($("#instructorTemplate").tmpl(self.TableDetailList()); 

Или вы используете метод html(), чтобы заменить все содержимое #instructorsList

$("#instructorsList") 
    .html($("#instructorTemplate").tmpl(self.TableDetailList());