2

サーバーからアドオンデータを取得し、多数のチェックボックスを使用してビューモデルを動的に作成し、選択したチェックボックスとその価格に従ってこれらのチェックボックスを合計する必要があります。

私のviewModelは以下です：

var addonsData = [
    { sku: 201, name: "addon A", price: 1 }
    { sku: 201, name: "addon B", price: 2 }
    { sku: 201, name: "addon C", price: 10 }
];

function viewModel(addonsData) {
    for (var i = 0; i < addonsData.length; i++) {
      // addonsData[i] somehow add this to the viewmodel dynamically?
    }

    this.addons = addonsData;
    this.total = ko.computed(function(){
        var x = 0;
        return x;
    });
}

ko.applyBindings(new viewModel(addonsData));

上記のビューモデルと HTML ビューに関するガイダンスをいただければ幸いです。

4

1 に答える 1

2

最も簡単な方法は、ko.mapping.fromJSを使用することです。

このフィドルを見てください

var addonsData = [{
    sku: 201,
    name: "addon A",
    price: 1
}, {
    sku: 201,
    name: "addon B",
    price: 2
}, {
    sku: 201,
    name: "addon C",
    price: 10
}];

function viewModel(ad) {
    var self = this;

    var mapping = {
        create: function (item) {
            item.data.selected = ko.observable();
            return item.data;
        }
    };
    this.addons = ko.mapping.fromJS(ad, mapping);



    this.selectedItems = ko.computed(function () {
        return ko.utils.arrayFilter(self.addons(), function (item) {
            return item.selected();
        });
    });
    this.total = ko.computed(function () {
        return self.selectedItems().length;
    });

    this.totalPrice = ko.computed(function () {
        var t = 0;
        ko.utils.arrayForEach(self.addons(), function (item) {
            if(item.selected())
               t += item.price;
        });
        return t;
    });

}

ko.applyBindings(new viewModel(addonsData));

フィドルを見る

お役に立てば幸いです。

于 2013-07-14T20:42:13.050 に答える