綁定的可觀察數組發生更改後，表格不再刷新

Question

我被卡住了，希望得到一些幫助！

我有一個創建方法在我的ViewModel調用微風CreateEntity方法添加一個新的項目的Office類型的可觀察數組。這一切都很順利，可觀察陣列的長度相應增加 - 但是！

由於一些奇怪的原因，錶行不會相應地刷新 - 我在做什麼錯？

這是表馬克 - 達：

---

<table class="table table-striped table-bordered table-condensed" data-bind='visible: offices().length > 0'> 
      <thead> 
       <tr> 
        <td class="thead">Office Name</td> 
        <td class="thead">Support Tel.</td> 
        <td class="thead">Support Email</td> 
        <td class="thead">Support Fax</td> 
        <td class="thead">Ftp URL</td> 
        <td class="thead" /> 
       </tr> 
      </thead> 
      <tbody data-bind='foreach: offices'> 
       <tr class=""> 
        <td> 
         <input data-bind='value: officeName' /> 
        </td> 
        <td> 
         <input data-bind='value: supportNo' /> 
        </td> 
        <td> 
         <input data-bind='value: supportEmail' /> 
        </td> 
        <td> 
         <input data-bind='value: supportFax' /> 
        </td> 
        <td> 
         <input data-bind='value: supportFtp' /> 
        </td> 
        <td> 
         <div class="button-bar"> 
          <button class="btn btn-danger" 
           data-bind="click: deleteOffice, disable: hasChanges"> 
           Delete 
          </button> 
         </div> 
        </td> 
       </tr> 
      </tbody> 
     </table> 

這是我的ViewModel代碼

define(['services/officesEntityService', 
     'durandal/plugins/router', 
     'durandal/system', 
     'durandal/app', 
     'services/logger'], 
    function (officesEntityService, router, system, app, logger) { 

     var offices = ko.observableArray(); 
     var isSaving = ko.observable(false); 
     var isDeleting = ko.observable(false); 

     var activate = function() { 
      return officesEntityService.getOffices(offices); 
     }; 

     ... 

     var addOffice = function() { 
      offices.push(officesEntityService.createOffice()); 
     } 

     ... 

     var vm = { 
      offices: offices, 
      isSaving: isSaving, 
      isDeleting:isDeleting, 
      activate: activate, 
      goBack: goBack, 
      hasChanges: hasChanges, 
      cancel: cancel, 
      canSave: canSave, 
      save: save, 
      canAdd:canAdd, 
      addOffice:addOffice, 
      deleteOffice: deleteOffice, 
      canDeactivate: canDeactivate,    
      title: 'Offices Administration' 
     }; 
     return vm; 
    }); 

最後我微風數據服務暴露在虛擬機用來推動一個新的這個功能辦公室變成可觀察陣列：

var createOffice = function() { 
      return manager.createEntity('Office', { officeId: jQuery.Guid.New(), officeName: 'New Office'}); 
     }; 

Answer 1

發現問題...

<td> 
    <div class="button-bar"> 
     <button class="btn btn-danger" 
       data-bind="click: deleteOffice, disable: hasChanges">Delete 
     </button> 
    </div> 
</td> 

我改變了按鈕標籤爲<a href>，適用相同的風格和固定的問題！