Question

SuperNoob在这里，尝试将多个“选项”作为字符串[]或对象加载到可以使用Knockout添加到购物车的“产品”:(使用John Papa的PluralSight Knockout更改跟踪示例）以下是观点：

<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加载到“产品”产品数组中，除了我无法通过为每个产品改变多个选项来迭代它。以下是视图模型的功能部分：

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对象中？

Answer 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);
    });
}

希望这有帮助。

如何将嵌套的JSON / C＃数组加载到视图模型中？使用Knockout，jQuery

1 个答案: