使用添加/刪除來綁定表的數據綁定問題

Question

我正在使用MVC4填充複雜的視圖模型。我填充這樣

var job = @Html.Raw(Json.Encode(Model.job)); 
var customer = @Html.Raw(Json.Encode(Model.customer)); 
var listTasks = @Html.Raw(Json.Encode(Model.Tasks)); 
var estimateMaterials = @Html.Raw(Json.Encode(Model.estimateMaterials)); 
var estimate = @Html.Raw(Json.Encode(Model.estimate)); 

var JobPost = { 
    customer: customer, 
    job: job, 
    listTasks: ko.observableArray(listTasks), 
    estimateMaterials: ko.observableArray(estimateMaterials), 
    estimate: ko.observable() 
}; 
ko.applyBindings(JobPost, document.getElementById("update-job-form")); 

現在，對象estimateMaterials被填充到行。而該行，我想在表的底部這樣

然後我看見，rniemeyer wonderful fiddle上添加/刪除易行添加Remove到每一行和Add button。
叉形小提琴是：http://jsfiddle.net/codovations/tDV9k/

在有這樣的

self.addLine = function() { self.lines.push(new CartLine()) }; 
self.removeLine = function(line) { self.lines.remove(line) }; 

一個片段，我想實現類似的東西，以我的觀察到的陣列
estimateMaterials: ko.observableArray(estimateMaterials)

這是可能的像這樣添加方法？

P.S：我通過使用jquery分別克隆一行/刪除最接近的tr來添加/刪除。我正在尋求一種更乾淨的方式。

更新：

我這裏面臨的主要問題是如何訪問對象的observableArray

Answer 1

我可能錯誤地理解你的問題，看看下面的，讓我知道如果您有任何疑問

function EstimateMaterialLine() { 
    var self = this; 
    self.EstMatlID = ko.observable(); 
    //other observables to follow 
} 
var job = @Html.Raw(Json.Encode(Model.job)); 
var customer = @Html.Raw(Json.Encode(Model.customer)); 
var listTasks = @Html.Raw(Json.Encode(Model.Tasks)); 
var estimateMaterials = @Html.Raw(Json.Encode(Model.estimateMaterials)); 
var estimate = @Html.Raw(Json.Encode(Model.estimate)); 

var JobPostViewModel = function(){ 
    var self = this; 
    self.customer = ko.observable(customer); 
    self.job = ko.observable(job); 
    self.listTasks = ko.observableArray(listTasks); 
    self.estimateMaterials = ko.observableArray(estimateMaterials); 
    self.estimate = ko.observable(estimate); 
    self.removeEstimateMaterial = function(line) { 
     self.estimateMaterials.remove(line) 
    }; 
    self.addEstimateMaterial = function() { 
     self.estimateMaterials.push(new EstimateMaterialLine()) 
    }; 
}; 
var model = new JobPostViewModel(); 
ko.applyBindings(model, document.getElementById("update-job-form")); 

因此，可以說你有一個表，那麼你可以使用它像這樣：

<table data-bind="foreach: estimateMaterials"> 
    <tr> 
     <td> <input type="button" value="delete" data-bind="click: $root.removeEstimateMaterials"/> </td> 
    <tr> 
</table> 
<input type="button" value="Add" data-bind="click: $root.addEstimateMaterials"/>