0

以下の点で少し困っています。ノックアウトを使用して、ネストされたリストを含むリストを編集しています。これは、ノックアウト Web サイトの連絡先エディターに少し似ています。

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

次の例では、「designs」は上記の例の「連絡先」に関連し、「designDeliveries」は「電話番号」に関連しています。

したがって、各「デザイン」内に MaxQuantity と呼ばれる値と、各「designDelivery」内に Quantity と呼ばれる値があります。事実上、私が達成しようとしているのは、特定の「デザイン」に関連するすべての「designDeliveries」の「MaxQuantity」から「Quantity」の合計を差し引いた「Remaining」と言う「残り」と呼ばれる各「デザイン」に別の値を持つことです。 "。新しい「designDeliveries」を追加して「Quantity」フィールドに入力すると、もちろん、これはその特定のデザインの新しい「Remaining」値から差し引かれます。

これまでのところ、私は以下のコードを持っています:

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>

これが十分に明確であることを願っています。これを達成する方法を知っている人はいますか?

前もって感謝します

4

1 に答える 1

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/

于 2012-10-17T17:42:56.987 に答える