淘汰賽 - 扣除數組中的值

Question

我在以下方面遇到了一些問題。我使用的是淘汰賽編輯包含嵌套列表的列表，有點像淘汰賽網站上的聯繫人編輯器：

http://knockoutjs.com/examples/contactsEditor.html

在我的例子如下從了「設計」涉及到「聯繫人」上面的例子和「designDeliveries」涉及到「電話號碼」。

所以我在每個「設計」中都有一個名爲MaxQuantity的值和一個名爲Quantity的「designDelivery」中的值。實際上，我試圖實現的每個「設計」中都有另一個值，稱爲「剩餘」，其基本上將是「MaxQuantity」減去與「特定」設計有關的所有「designDeliveries」中「Quantity」的總和」。當我添加新的「designDeliveries」，並填寫「數量」字段這當然應該由新的「剩餘」價值

到目前爲止扣除特定的設計，我有下面的代碼：

var DesignsModel = function (designs) { 

    var self = this; 
    self.designs = ko.observableArray(ko.utils.arrayMap(designs, function (design) { 
     return { BookingDesignId: design.BookingDesignId, 
      DesignName: design.DesignName, 
      MaxQuantity: design.Quantity, 
      DesignDeliveries: ko.observableArray(design.DesignDeliveries) }; 
    })); 

    self.addDesignDelivery = function (design) { 
     design.DesignDeliveries.push({ 
      Quantity: "", 
      DepotId: "" 
     }); 
    }; 

    self.removeDesignDelivery = function (designDelivery) { 
     $.each(self.designs(), function() { this.DesignDeliveries.remove(designDelivery) }) 
    }; 

    self.save = function() { 
     self.lastSavedJson(JSON.stringify(ko.toJS(self.designs), null, 2)); 
    }; 

    self.lastSavedJson = ko.observable(""); 

}; 

ko.applyBindings(new DesignsModel(initialData)); 

initialData看起來是這樣的：

[{"DesignId":"1","DesignName":"Design1","Quantity":50,"DesignDeliveries":[]},{"DesignId":"2","DesignName":"Design2","Quantity":50,"DesignDeliveries":[]},{"DesignId":"3","DesignName":"Design3","Quantity":500,"DesignDeliveries":[]}] 

和HTML這樣的：

<div data-bind="foreach: designs"> 

    <div> 
     <span data-bind="text: DesignName"></span> 
     <a href="#" data-bind="click: $root.addDesignDelivery">Add</a> 
    </div> 
    <div> 
     <span data-bind="text: MaxQuantity"></span> 
    </div> 
    <div> 
     <span data-bind="text: Remaining"></span> 
    </div> 

    <div data-bind="foreach: DesignDeliveries"> 
     <div> 
      <input data-bind="value: Quantity" /> 
     </div> 
     <div> 
      <a href="#" data-bind="click: $root.removeDesignDelivery"> 
       Delete 
      </a>    
     </div>   
    </div>  
</div> 

我希望這很清楚。有沒有人有一個想法，我會如何去實現這一點？

在此先感謝

Answer 1

我會建議您將複雜的視圖模型分頭幾個小視圖模型。然後才達到期望的功能，你只需要添加計算，計算剩餘數量：

var DesignDeliveryModel = function(quantity, depotId) { 
    var self = this; 

    self.Quantity = ko.observable(quantity); 
    self.DepotId = depotId; 
}; 

var DesignModel = function(bookingDesignId, designName, maxQuantity, deliveries) { 
    var self = this; 

    self.BookingDesignId = bookingDesignId; 
    self.DesignName = designName; 
    self.MaxQuantity = maxQuantity; 
    self.DesignDeliveries = ko.observableArray(deliveries); 

    self.Remaining = ko.computed(function() { 
     var result = self.MaxQuantity; 
     ko.utils.arrayForEach(self.DesignDeliveries(), function(item) { 
      result = result - item.Quantity(); 
     }); 
     return result; 
    }); 

    self.addDesignDelivery = function() { 
     self.DesignDeliveries.push(new DesignDeliveryModel(0, "")); 
    }; 

    self.removeDesignDelivery = function(designDelivery) { 
     self.DesignDeliveries.remove(designDelivery); 
    }; 
}; 

var DesignsModel = function(designs) { 
    var self = this; 

    self.designs = ko.observableArray(ko.utils.arrayMap(designs, function(design) { 
     return new DesignModel(design.BookingDesignId, design.DesignName, design.Quantity, design.DesignDeliveries); 

    })); 

    self.save = function() { 
     self.lastSavedJson(JSON.stringify(ko.toJS(self.designs), null, 2)); 
    }; 

    self.lastSavedJson = ko.observable(""); 
}; 

和小更新HTML來改變調用添加和刪除功能的情況下：

<div data-bind="foreach: designs"> 
    <div> 
     <span data-bind="text: DesignName"></span> 
     <a href="#" data-bind="click: addDesignDelivery">Add</a> 
    </div> 
    <div> 
     <span data-bind="text: MaxQuantity"></span> 
    </div> 
    <div> 
     <span data-bind="text: Remaining"></span> 
    </div> 

    <div data-bind="foreach: DesignDeliveries"> 
     <div> 
      <input data-bind="value: Quantity" /> 
     </div> 
     <div> 
      <a href="#" data-bind="click: $parent.removeDesignDelivery"> 
       Delete 
      </a>    
     </div>   
    </div>  
</div> 

這裏是工作提琴： http://jsfiddle.net/vyshniakov/7JUGE/