Question

我试图了解如何观察和映射变量。 jsfiddle在这里http://jsfiddle.net/rniemeyer/adNuR/。以下两行javascripts似乎设置了观察变量：

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

那么上面两行是怎么做的呢？它如何知道如何将类别和产品映射到sampleProductCategories []数组？

感谢您的帮助。

Answer 1

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

每个cartLine对象都有category和product个可观察对象来保存当前选项。

例如，以下是各个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
}

因此，下拉列表一起工作以提供嵌套选项。

knockoutjs'购物车编辑'的例子问题

1 个答案: