Javascript KnockoutJS-扩展购物车示例

我目前正在尝试扩展以预加载JSON集合中的现有行

比如说，我有一个这样的物体：

var existingRows = [{
        "Category":Classic Cars,
        "Product":2002 Chevy Corvette,
        "Quantity":1,
    }, {
        "Category":Ships,
        "Product":Pont Yacht,
        "Quantity":2,
}];

我正试图修改这个示例，以便在加载时用两行填充网格，并将组合框预先设置为JSON对象中的项目

我似乎无法让这个对象很好地与JSFIDLE配合使用，但我已经修改了Cart和CartLine函数，以及ApplyBindings调用，如下所示：

var CartLine = function(category, product) {
    var self = this;
    self.category = ko.observable(category);
    self.product = ko.observable(product);
    // other code
}

var Cart = function(data) {
    var self = this;
    self.lines = ko.observableArray(ko.utils.arrayMap(data, function(row) { return new CartLine(row.Category, row.Product);}))
    // other code
}

ko.applyBindings(new Cart(existingRows));

---

这将在加载时正确插入两行，但不会设置下拉列表。任何帮助都将不胜感激：）

问题在于CartLine对象中可观察到的

类别

和

产品

的值不是简单的字符串。它们是实际对象，例如，

category

指该示例中提供的样本数据中的特定类别，与产品相同。 但你只是把它们设置成字符串

（另一个问题是您的JS对象existingRows不是有效的javascript，因为字符串周围缺少引号）

要获得使用existingRows对象的示例，可以从示例数据中提取相关类别和产品：

var Cart = function(data) {
    // Stores an array of lines, and from these, can work out the grandTotal
    var self = this;
    self.lines = ko.observableArray(ko.utils.arrayMap(data, function(row) {
        var rowCategory = ko.utils.arrayFirst(sampleProductCategories, function(category) {
            return category.name == row.Category;
        });
        var rowProduct = ko.utils.arrayFirst(rowCategory.products, function(product) {
            return product.name == row.Product;
        });

        return new CartLine(rowCategory, rowProduct, row.Quantity);
    }));
    // other code
}

---

更新的fiddle:

问题在于CartLine对象中可观察到的

类别

和

产品

的值不是简单的字符串。它们是实际对象，例如，

category

指该示例中提供的样本数据中的特定类别，与产品相同。 但你只是把它们设置成字符串

（另一个问题是您的JS对象existingRows不是有效的javascript，因为字符串周围缺少引号）

要获得使用existingRows对象的示例，可以从示例数据中提取相关类别和产品：

var Cart = function(data) {
    // Stores an array of lines, and from these, can work out the grandTotal
    var self = this;
    self.lines = ko.observableArray(ko.utils.arrayMap(data, function(row) {
        var rowCategory = ko.utils.arrayFirst(sampleProductCategories, function(category) {
            return category.name == row.Category;
        });
        var rowProduct = ko.utils.arrayFirst(rowCategory.products, function(product) {
            return product.name == row.Product;
        });

        return new CartLine(rowCategory, rowProduct, row.Quantity);
    }));
    // other code
}

更新小提琴：

网上购物
添加产品


产品
价格
量
小计（卢比）
总值：卢比
$（文档）.ready（函数（）{
$（“#btnAdd”）.button（）；
ko.applyBindings（新网上购物（））；
});
函数格式货币（值）{
返回“$”+value.toFixed（2）；
}
变量项=函数（）{
var self=这个；
self.product=ko.observable（）；
自身数量=可观察的ko（1）；
self.subtotal=ko.computed（函数（）{
var result=self.product（）？self.product（）.price*parseInt（“0”+self.quantity（），10）：0；
返回结果；
});
};
var OnlineShopping=函数（）{
var self=这个；
//项目清单
self.items=ko.observearray（[new Item（）]）；
//计算总奖金。
self.grandTotal=ko.computed（函数（）{
var合计=0；
$.each（self.items（），function（）{total+=this.subtotal（）}）
返回总数；
});
//添加项
self.addLine=函数（）{
self.items.push（新项（））
};
//删除项目
self.removeLine=函数（）{
self.items.remove（此）
};
};
//项目集合
var products=[{名称：“IPhone”，价格：“45000”}，{名称：“Galaxy Y”，价格：“7448”}，{名称：“IPad”，价格：“25000”}，{名称：“笔记本电脑”，价格：“35000”}，{名称：“Calci”，价格：“750”}；

网上购物
添加产品


产品
价格
量
小计（卢比）
总值：卢比
$（文档）.ready（函数（）{
$（“#btnAdd”）.button（）；
ko.applyBindings（新网上购物（））；
});
函数格式货币（值）{
返回“$”+value.toFixed（2）；
}
变量项=函数（）{
var self=这个；
self.product=ko.observable（）；
自身数量=可观察的ko（1）；
self.subtotal=ko.computed（函数（）{
var result=self.product（）？self.product（）.price*parseInt（“0”+self.quantity（），10）：0；
返回结果；
});
};
var OnlineShopping=函数（）{
var self=这个；
//项目清单
self.items=ko.observearray（[new Item（）]）；
//计算总奖金。
self.grandTotal=ko.computed（函数（）{
var合计=0；
$.each（self.items（），function（）{total+=this.subtotal（）}）
返回总数；
});
//添加项
self.addLine=函数（）{
self.items.push（新项（））
};
//删除项目
self.removeLine=函数（）{
self.items.remove（此）
};
};
//项目集合
var products=[{名称：“IPhone”，价格：“45000”}，{名称：“Galaxy Y”，价格：“7448”}，{名称：“IPad”，价格：“25000”}，{名称：“笔记本电脑”，价格：“35000”}，{名称：“Calci”，价格：“750”}；