Knockout自定義綁定不會正確顯示初始viewModel數據

Question

我使用第三方插件來編輯表格。所以我需要爲<td>創建一個自定義綁定，以便插件引起的對文本所做的任何更改都會觸發視圖模型更新。但是自定義綁定不顯示正確的數據，而不是內置的「文本」綁定。我做錯了什麼嗎？

請參閱：http://jsfiddle.net/VbeBA/5

HTML：

<table id="table1" cellspacing="0" cellpadding="0" border="0"> 
    <tr> 
     <th style="width:150px">Product</th> 
     <th>Price ($)</th> 
     <th>Quantity</th> 
     <th>Amount ($)</th> 
    </tr> 

    <tbody data-bind='template: {name: "orderTemplate", foreach: orders}'></tbody> 
</table> 

<script type="text/html" id="orderTemplate"> 
    <tr> 
     <td data-bind="text: product">${product}</td> 
     <td class="editable number" data-bind="dataCell: price"></td> 
     <td class="editable number"data-bind="dataCell: quantity">${quantity}</td> 
     <td class="number" data-bind="text: amount">${amount}</td> 
    </tr> 
</script> 

CSS：

table 
{ 
    border: solid 1px #e8eef4; 
    border-collapse: collapse; 
} 

table th 
{ 
    padding: 6px 5px; 
    background-color: #e8eef4; 
    border: solid 1px #e8eef4; 
} 

table td 
{ 
    padding:0 3px 0 3px; 
    margin: 0px; 
    height: 20px; 
    border: solid 1px #e8eef4; 
} 

td.number 
{ 
    width: 100px; 
    text-align:right; 
} 

td.editable 
{ 
    background-color:#fff; 
} 

td.editable input 
{ 
    font-family: Verdana, Helvetica, Sans-Serif; 
    text-align: right; 
    width: 100%; 
    height: 100%; 
    border: 0; 
} 

td.editing 
{ 
    border: 2px solid Blue; 
} 

腳本：

$(function() { 
    ko.bindingHandlers.dataCell = { 

     init: function (element, valueAccessor) { 
      ko.utils.registerEventHandler(element, "change", function() { 
       var value = valueAccessor(); 
       value($(element).text()); 
      }); 
     }, 
     update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
      var value = valueAccessor(); 
      $(element).text(value); 
     } 

    }; 

    var order = function (product, price, quantity) { 
     this.product = product; 
     this.price = ko.observable(price); 
     this.quantity = ko.observable(quantity); 
     this.amount = ko.dependentObservable(function() { 
      return this.price() * this.quantity(); 
     }, this); 
    } 

    var ordersModel = function() { 
     this.orders = ko.observableArray([]); 
    } 


    var viewModel = new ordersModel(); 
    viewModel.orders = ko.observableArray([ 
      new order("Gala Apple", 0.79, 150), 
      new order("Naval Orange", 0.29, 500) 
     ]); 

    ko.applyBindings(viewModel); 

    $(".editable").change(); 
}); 

Answer 1

在你update功能，您將婉t解開可觀察的事物。 valueAccessor()將會給你自己的觀測值，然後你想打開它（稱之爲函數）來獲得值。

一個安全的方式做到這一點是使用ko.utils.unwrapObservable，因爲它會容忍這兩個觀測和非觀測。

所以，你的更新將是這樣的：

update: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); 
     $(element).text(value); 
    } 

此外，在你的小提琴，你已經jQuery.tmpl淘汰賽後上市，所以KO沒有註冊jQuery的模板引擎。

這裏是一個更新的小提琴：http://jsfiddle.net/rniemeyer/VbeBA/8/

更新時間： 最終的解決方案是在http://jsfiddle.net/rniemeyer/qQaUa/