1

SuperNoob 在这里，尝试将不同的多个“选项”作为字符串 [] 或对象加载到可以使用 Knockout 添加到购物车的“产品”中：（来自 John Papa 的 PluralSight Knockout Change Tracking 示例）这是看法：

<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)。

还有更多代码：我希望这足以说明问题。

亲爱的 Stackers，如何使用此函数将 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 回答