2

所以这是我的样本数据。它将以 json 格式构造加载表单服务器到下面的对象图中。它是一组“Choice”对象，每个对象都将具有id、name、stages 和 currentStageId属性。“ Choice”对象中的“stages”属性是一个“Stage”对象数组，它具有id、name 和 value属性。“Choice”对象将经历从“第一阶段”到“第四阶段”的阶段数所以用户可以从给定下拉列表中选择一个“阶段”并保存它。“currentStageId”是存储“id”的属性

注意：为简洁起见，每个选项可以有不同类型的阶段，尽可能简单

即对于选择 1，当前保存的阶段是 4

var data = [
new Choice({
    id: 1,
    name: "One",
    stages: [
    new Stage({
        id: 1,
        name: "First Stage",
        value: 25
    }),
    new Stage({
        id: 2,
        name: "Second Stage",
        value: 50
    }),
    new Stage({
        id: 3,
        name: "Third Stage",
        value: 75
    }),
    new Stage({
        id: 4,
        name: "Fourth Stage",
        value: 100
    })],
    currentStageId: 4

}),
new Choice({
    id: 2,
    name: "Two",
    stages: [
    new Stage({
        id: 1,
        name: "First Stage",
        value: 25
    }),
    new Stage({
        id: 2,
        name: "Second Stage",
        value: 50
    }),
    new Stage({
        id: 3,
        name: "Third Stage",
        value: 75
    }),
    new Stage({
        id: 4,
        name: "Fourth Stage",
        value: 100
    })],
    currentStageId: 3

}),
new Choice({
    id: 3,
    name: "Three",
    stages: [
    new Stage({
        id: 1,
        name: "First Stage",
        value: 25
    }),
    new Stage({
        id: 2,
        name: "Second Stage",
        value: 50
    }),
    new Stage({
        id: 3,
        name: "Third Stage",
        value: 75
    }),
    new Stage({
        id: 4,
        name: "Fourth Stage",
        value: 100
    })],
    currentStageId: 2

})];

这是保存数据的“Choice”和“Stage”模型和用于绑定的ViewModel

function ViewModel(data) {
    var self = this;
    self.choices = ko.observableArray(data);
    //dont require pre selection so kept it with empty observable so it
    //will be set to first item in the dropdown list
    self.selectedChoice = ko.observable();
}

function Choice(data) {
   //debugger;
    this.id = data.id;
    this.name = data.name;
    //require pre selection of stage as choice can go through no of 
    //stages and selected stage name and value will be stored
    this.selectedStage = ko.observable(ko.utils.arrayFirst(data.stages, function (item) {
        return item.id === data.currentStageId;
    }));
    this.stages = ko.observableArray(data.stages);

}

function Stage(data) {
    this.id = data.id;
    this.name = data.name;
    this.value = data.value;
}
ko.applyBindings(new ViewModel(data));

这是我的看法

<select data-bind="options: choices, optionsText: 'name', value: selectedChoice"></select>
<select data-bind="options: selectedChoice().stages, optionsText: 'name', value: selectedChoice().selectedStage"></select>

Knockout.js 2x 版本

  1. 已保存阶段的预选择正在工作
  2. 选择的阶段被更新为底层的 observable

这是在 js 中使用 KO 2x 的工作示例

Knockout.js 3x 版本

  1. 已保存阶段的预选择不起作用
  2. 不保留用于选择的选定阶段。更改选择时，每次更改选择时，都将 selectedStage 设置为下拉列表中的第一项。

这是KO 3x 的工作示例

最后是实际部分。问题！

  1. 为什么相同的代码在两个不同版本的 KO 中表现不同。我在 KO 中错过了什么新东西吗？还是KO中的错误？
  2. 使用最新版本的 KO 应该做哪些代码更改以产生与更高版本 KO 相同的功能？因为我的项目是用最新版本的 konckout.js 3.1.0 开发的，我不想切换回旧版本来实现这个功能。
  3. KO 版本的哪个行为是正确的，无论是 2x 还是 3x？内部发生了什么？这是导致这种行为差异的原因？

提前致谢。

4

1 回答 1

0

我认为它与2有关。绑定现在独立刷新
现在您应该使用selectedChoice从绑定中移出options，例如 

<div data-bind="with: selectedChoice">
   <select data-bind="options: stages, optionsText: 'name', value: selectedStage"></select>
</div>
于 2014-10-21T11:46:19.880 回答