更新視圖模型時視圖中的表格單元格不更新

Question

我無法弄清楚當我更新js/knockout代碼中的viewmodel時，視圖中的表格單元格沒有更新的原因。

這是我的fiddle我得到@ haim770和@ Matt.kaaj的幫助。所以當你退出最後一行的最後一個單元格時。然後，您在新行的第一個單元格中鍵入內容並將其標記出來，並且應該更新描述。我檢查了控制檯，它正確地更新了viewmodel。當用谷歌搜索時，我發現我不得不讓我的可觀察數組中包含可觀察數據。所以我認爲我正在使用映射插件正確執行此操作。 這裏是我從小提琴的所有代碼。

HTML：

<table class="table table-bordered table-striped" id="brochureItems"> 
<thead> 
    <tr> 
     <th> 
      Item No. 
     </th> 
     <th> 
      Broc Code 
     </th> 
     <th width="40%"> 
      Item Desc 
     </th> 
     <th> 
      Retail 
     </th> 
     <th> 
      Remove 
     </th> 
    </tr> 
</thead> 
<tbody data-bind="foreach: items"> 
    <tr> 
     <td> 
      <input data-bind="value: itemNo, hasFocus: true, event: { blur: $parent.checkItemNo }" class="form-control item-ID" /> 
     </td> 
     <td> 
      <div data-bind="if: ($index() < ($parent.items().length - 1))"><input data-bind="value: brocCode" class="form-control" readonly="readonly" /></div> 
      <div data-bind="if: ($index() === ($parent.items().length - 1))"><input data-bind="value: brocCode" class="form-control" /></div> 

     </td> 
     <td class="item-desc"> 
      <input data-bind="value: itemDesc" class="form-control" tabindex="-1" /> 
     </td> 
     <td class="item-retail"> 
      <div data-bind="if: ($index() === ($parent.items().length - 1))"><input data-bind="value: retail, valueUpdate: 'afterkeydown', enterPress: 'addRow'" class="form-control" /></div> 
      <div data-bind="if: ($index() < ($parent.items().length - 1))"><input data-bind="value: retail, valueUpdate: 'afterkeydown'" class="form-control" /></div> 
     </td> 
     <td class="remove"><span class="glyphicon glyphicon-remove removeRow" data-bind="click: $parent.removeItem"></span></td> 

    </tr> 
</tbody> 

JS /淘汰賽：

var itemsModel = function(items) { 
    var self = this; 
    //console.log(JSON.stringify(items)); 
    //self.items = ko.observableArray(); 
    //ko.mapping.fromJS(items,{},self.items) 
    //self.items = ko.mapping.fromJSON(items); 
    //self.items = ko.observableArray(items); 

    self.items = ko.mapping.fromJSON(items); 

    self.checkItemNo = function(data) { 
    console.log("blurred!"); 
    //data = ko.observable(data); 
    //itemModel(data.itemNo) 
    //var itemNo = $.trim(data.itemNo); 
    var itemNo = "abc"; 
    if (itemNo != "") { 
     var item = ""; 
     /* 
     $.each(fullItemList, function(i, v) { 
     if (v.No.search(itemNo) != -1) { 
     item = v.Description; 
     return; 
     } 
     }); 
     if(item != "") { 
     console.log("found: " + item); 
     var match = ko.utils.arrayFirst(self.items, function(item) { 
     return itemNo === item.itemNo; 
     }); 
     */ 
     var match = false; 
     item = "Mudguard front"; 
     if (!match) { 
     console.log("not a match!"); 
     console.log(data); 
     data.itemDesc = item; 
     } 
    } 
    } 

    self.addLine = function() { 
    self.items.push(
     { 
     itemNo: "", 
     brocCode: "", 
     itemDesc: "", 
     retail: "" 
     } 
    ) 
    }; 

    self.removeItem = function(item) { 
    self.items.remove(item); 
    }; 
}; 

ko.bindingHandlers.enterPress = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
    var allBindings = allBindingsAccessor(); 
    element.addEventListener('keydown', function (event) { 
     var keyCode = (event.which ? event.which : event.keyCode); 
     if (keyCode === 13 || (!event.shiftKey && keyCode === 9)) { 
     event.preventDefault(); 
     console.log("hit enter/tab!"); 
     bindingContext.$root.addLine(); 
     return false; 
     } 
     return true; 
    }); 
    } 
}; 

function GetItems() { 
      //var itemsJSON = @Html.Raw(Json.Encode(Model.brochureItems)); 
      var itemsJSON = '[{"brochureId":1,"itemNo":"1000","brocCode":"1000","itemDesc":"Bicycle","retail":13.5},{"brochureId":1,"itemNo":"1100","brocCode":"1100","itemDesc":"Front Wheel","retail":35},{"brochureId":1,"itemNo":"1120","brocCode":"1120","itemDesc":"Spokes","retail":12.5},{"brochureId":1,"itemNo":"1150","brocCode":"1150","itemDesc":"Front Hub","retail":5},{"brochureId":1,"itemNo":"1151","brocCode":"1151","itemDesc":"Axle Front Wheel","retail":14},{"brochureId":1,"itemNo":"120","brocCode":"120","itemDesc":"Loudspeaker, Black, 120W","retail":12.5},{"brochureId":1,"itemNo":"125","brocCode":"125","itemDesc":"Socket Back","retail":10}]'; 
      var viewModel = new itemsModel(itemsJSON); 
      ko.applyBindings(viewModel); 
     } 

$(document).ready(function() { 
    GetItems(); 
}); 

更新

更新後的代碼，這裏是新fiddle。

Answer 1

mapping plugin爲您完成這項工作，併爲正在發送的數據創建可觀察變量。一旦你添加一個新行，你需要有一個子視圖模型，並添加一個新的實例，它本身包含可觀察的變量​​。

var itemsModel = function(items) { 
    var self = this; 
    //console.log(JSON.stringify(items)); 
    //self.items = ko.observableArray(); 
    //ko.mapping.fromJS(items,{},self.items) 
    //self.items = ko.mapping.fromJSON(items); 
    //self.items = ko.observableArray(items); 

    self.items = ko.mapping.fromJSON(items); 

    self.checkItemNo = function(data) { 
    console.log("blurred!"); 
    //data = ko.observable(data); 
    //itemModel(data.itemNo) 
    //var itemNo = $.trim(data.itemNo); 
    var itemNo = "abc"; 
    if (itemNo != "") { 
     var item = ""; 
     /* 
     $.each(fullItemList, function(i, v) { 
     if (v.No.search(itemNo) != -1) { 
     item = v.Description; 
     return; 
     } 
     }); 
     if(item != "") { 
     console.log("found: " + item); 
     var match = ko.utils.arrayFirst(self.items, function(item) { 
     return itemNo === item.itemNo; 
     }); 
     */ 
     var match = false; 
     item = "Mudguard front"; 
     if (!match) { 
     console.log("not a match!"); 
     console.log(data); 
     data.itemDesc = item; 
     } 
    } 
    } 

    self.addLine = function() { 
    self.items.push(new RowViewModel()) 
    }; 

    self.removeItem = function(item) { 
    self.items.remove(item); 
    }; 
}; 

var RowViewModel = function(){ 
    var self = this; 
    self.itemNo = ko.observable(); 
    self.brocCode = ko.observable(); 
    self.itemDesc = ko.observable(); 
    self.retail = ko.observable(); 

}