1

ここでSuperNoobは、さまざまな複数の「オプション」を文字列[]またはオブジェクトとして、ノックアウトを使用してショッピングカートに追加できる「製品」にロードしようとしています:(ジョンパパのPluralSightノックアウト変更追跡の例からの作業）これは見る：

<div>
    <span>OptionsArray: </span>
    <ul data-bind="foreach: optionsArray">
        <li data-bind="text: $data"></li>
    </ul>
</div>

これがC＃に変換されたJSONです：

{Id = 4, ModelId = 1, SalePrice = 1.00, ListPrice = 1.00, Rating = 5, Photo = "smallCoffee.jpg", CategoryId = 1, ItemNumber = "smallCoffee", Description = "Small Coffee", Model = new Model(){ Name = "Small Coffee", Brand = "Tim Hortons", Id = 1 }, Category = drinkCat, Options = new Options(){Name = "Sugar"}, OptionsArray = new string[]{"Sugar", "Cream"}}

このjavascript関数は機能し、jsonをProductsの「products」配列にロードします。ただし、製品ごとに複数のオプションを変更して反復することはできません。ビューモデルの機能部分は次のとおりです。

loadProductsCallback = function (json) {
            my.vm.tracker().markCurrentStateAsClean();
            $.each(json, function (i, p) {
                products.push(new my.Product(selectedProduct)                            
                        .id(p.Id)
                        .salePrice(p.SalePrice)
                        .photo(p.Photo)
                        .category(new my.Category()
                        .id(p.Category.Id)
                        .name(p.Category.Name)
                            )
                        .model(new my.Model()
                        .id(p.Model.Id)
                        .name(p.Model.Name)
                        .brand(p.Model.Brand)
                            )
                        .options(new my.Options()
                        .name(p.Options.Name)
                            )                            
                        .description(p.Description)
                        .rating(p.Rating)
                        .stateHasChanged(false);
                        $.each(p.OptionsArray, function(i, o) { p.optionsArray.push(o);});
                );
            });

そして、これがすべてのデータを取得しているProductオブジェクトです。

Product = function (selectedItem) {
    var self = this;
    self.id = ko.observable();
    self.salePrice = ko.observable();
    self.photo = ko.observable();
    self.model = ko.observable();
    self.options = ko.observable();
    self.optionsArray = ko.observableArray(["1", "2"]);
    self.category = ko.observable();
    self.description = ko.observable();
    self.rating = ko.observable();
    self.isSelected = ko.computed(function () {
        return selectedItem() === self;
    });
    self.isDrink = ko.computed(function () {
        return this.category() ? this.category().id() === 1 : false;
    }, self),
    self.isFood = ko.computed(function () {
        return this.category() ? this.category().id() === 4 : false;
    }, self),

    self.shortDesc = ko.computed(function () {
        return this.model() ? this.model().name() : "";
    }, self),
    self.opt = ko.computed(function () {
        return this.options() ? this.options().name() : "";
    }, self),
    self.optQty = ko.computed(function () {
        return this.options() ? this.options().qty() : "";
    }, self),
    self.photoUrl = ko.computed(function () {
        return photoPath + this.photo();
    }, self),
    self.rating.subscribe(function () {
        this.stateHasChanged(true);
    }, self),
    self.stateHasChanged = ko.observable(false);
};

loadProductsCallback関数は、ネストされたOptionsArrayを追加する部分を除いて正常に機能します。ネストされた$ .each関数と、単に.optionsArray（p.OptionsArray）を試しました。

もっとたくさんのコードがあります：これが意味をなすのに十分であることを願っています。

スタッカー様、この関数を使用してOptionsArrayをProductsオブジェクトに適切にロードするにはどうすればよいですか？

4

1 に答える 1

1

私があなたのコードを完全に理解しているかどうかはわかりませんが、ここに行きます。

あなたは製品を新しく作り上げてから、コレクションをループしてオプションにマップしようとしています。結果をソースオブジェクトにプッシュする場合を除きます。

これはどうですか。

loadProductsCallback = function (json) {
    my.vm.tracker().markCurrentStateAsClean();
    $.each(json, function (i, p) {
        var newProduct = new my.Product(selectedProduct)                            
                .id(p.Id)
                .salePrice(p.SalePrice)
                .photo(p.Photo)
                .category(new my.Category()
                .id(p.Category.Id)
                .name(p.Category.Name)
                    )
                .model(new my.Model()
                .id(p.Model.Id)
                .name(p.Model.Name)
                .brand(p.Model.Brand)
                    )
                .options(new my.Options()
                .name(p.Options.Name)
                    )                            
                .description(p.Description)
                .rating(p.Rating)
                .stateHasChanged(false);
        $.each(p.OptionsArray, function(i, o) { 
            newProduct.optionsArray.push(o);
        });

        products.push(newProduct);
    });
}

お役に立てれば。

于 2012-06-14T00:36:24.527 に答える