Knockout可觀察的更新但不更新UI？

Question

我已經在測試函數中更新了observable item屬性。 此更新已成功更新可觀察項目。

因爲我在調試中檢查它。

但標籤不更新。 有什麼不對？

i try item.serviceResult = ko.observable（「TESTING ...」）; 和其他東西，但用戶界面標籤不更新。

的Javascript代碼：

var ViewModel = function (myPano) { 
     var observablePano = ko.utils.arrayMap(myPano, function (panoData) { 
     return { 
      panoNo: ko.observable(panoData.panoNo), 
      modemNo: ko.observable(panoData.modemNo), 
      aydinlatmaNo: ko.observable(panoData.aydinlatmaNo), 
      geneltuketimNo: ko.observable(panoData.geneltuketimNo), 
      serviceResult: ko.observable(panoData.serviceResult), 
      test: function (item) { 
       alert(item.panoNo()); 
       item.serviceResult = "TESTING..."; 
      } 
     }; 
    }); 
    this.Panos = ko.observableArray(observablePano); 
}; 

$(function() { 

    var viewModel = new ViewModel(
     [ 
     { panoNo: '1', modemNo: '', aydinlatmaNo: '', geneltuketimNo: '', serviceResult: '.' }, 
     { panoNo: '2', modemNo: '', aydinlatmaNo: '', geneltuketimNo: '', serviceResult: '.' }, 
     { panoNo: '3', modemNo: '', aydinlatmaNo: '', geneltuketimNo: '', serviceResult: '.' }, 
     { panoNo: '4', modemNo: '', aydinlatmaNo: '', geneltuketimNo: '', serviceResult: '.' }, 
     { panoNo: '5', modemNo: '', aydinlatmaNo: '', geneltuketimNo: '', serviceResult: '.' }, 
     { panoNo: '6', modemNo: '', aydinlatmaNo: '', geneltuketimNo: '', serviceResult: '.' } 
     ] 
     ); 

    ko.applyBindings(viewModel); 

}); 

html : <div class="row show-grid" data-bind="foreach: Panos"> 

    <div class="col-xs-6 col-md-4"> 

     <table> 
      <tr> 
       <td> 
        <form class="form-horizontal"> 
         <fieldset> 

          <div class="input-group"> 
           <input type="text" placeholder="PANO NO" class="form-control" data-bind="value: panoNo"> 
          </div><div class="input-group"> 
           <input type="text" placeholder="MODEM NO" class="form-control" data-bind="value: modemNo"> 
          </div><div class="input-group"> 
           <input type="text" placeholder="AYDINLATMA SAYAÇ NO" class="form-control" data-bind="value: aydinlatmaNo"> 
          </div><div class="input-group"> 
           <input type="text" placeholder="GENEL TÜKETİM SAYAÇ NO" class="form-control" data-bind="value: geneltuketimNo"> 
          </div> 

         </fieldset> 

        </form> 
       </td> 
       <td> 
        <button type="button" class="btn btn-primary" data-bind="click: test">Testi Başlat</button> 
        <br /> 
        <span class="label label-default" data-bind="text: serviceResult"></span>       
       </td> 
      </tr> 
     </table> 


    </div> 

</div> 

Answer 1

嘗試item.serviceResult("Testing");。

如果你只是分配一個新值變量，可觀察到的，什麼都不會發生：

item.serviceResult = ko.observable("1"); 

//apply bindings, Label will Display 1 

item.serviceResult = ko.observable("2"); 

//Label is still bound to the observable that contains "1", you'd have to reassign bindings to find that it should now bind to some other observable 

代替：

item.serviceResult("2"); 
//assign new value into the existing observable! this will update the UI as the ui is bound to this observable object 

我希望這說明了一點。