knockoutjs '购物车编辑器'示例问题

Question

我试图了解如何观察和映射变量。 jsfiddle 在这里 http://jsfiddle.net/rniemeyer/adNuR/。下面 2 行 javascript 似乎设置了用于观察的变量：

this.category = ko.observable();
this.product = ko.observable();

那么上面 2 行是如何实现这些技巧的呢？它如何知道如何将类别和产品映射到sampleProductCategories[]数组中？

感谢您的帮助。

Answer 1

小提琴加载一个资源，其中包含 sampleProductCategories 数组中的所有选项：http://knockoutjs.com/examples/resources/sampleProductCategories.js

每个 cartLine 对象都有 category和 product observables 来保存当前的选择。

例如，以下是单个 cartLine 的绑定之一：

<select data-bind='options: sampleProductCategories, optionsText: "name", optionsCaption: "Select...", value: category' />

这表示下拉列表中的选项应来自 sampleProductCategories。框中的值应为 name 属性，并且在进行选择时，应将其放入 cartLine 的 category 中。

因此，当做出选择时，category 现在等于 sampleProductCategories 数组中的相应对象。类似于：

{
    "products": [{
        "name": "1950's Chicago Surface Lines Streetcar",
        "price": 26.72
    }, {
        "name": "1962 City of Detroit Streetcar",
        "price": 37.49
    }, {
        "name": "Collectable Wooden Train",
        "price": 67.56
    }],
    "name": "Trains"
}

现在，第二个下拉列表绑定如下所示：

<select data-bind='visible: category, options: category() ? category().products : null, optionsText: "name", optionsCaption: "Select...", value: product' />

如果选择了类别，则会显示此绑定。这些选项来自所选类别的 products 数组。当选择一个值时，product observable 将使用数组中的适当对象填充。就像：

{
     "name": "Collectable Wooden Train",
     "price": 67.56
}

所以，下拉菜单一起提供嵌套选项。