Question

所以这是我的样本数据。以json格式加载表单服务器构造成下面的objec图。它的一系列“Choice”对象每个都有 id，name，stages＆amp; currentStageId 属性。 “选择”对象中的“阶段”属性是“Stage”对象的数组，其中包含 id，name＆amp; 值属性。“选择”对象将经历从“第一阶段”到“第四阶段”的各个阶段，因此用户可以从给定下拉列表中选择“阶段”保存。 “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

})];

这是“选择”＆amp; “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版

预先选择已保存的舞台正在运作
选择的选择阶段将更新为基础可观察

以下是js中的Working sample with KO 2x

Knockout.js 3x版

预先选择已保存的舞台无效
不保留选定的选择阶段。更改选项后，每次更改选项时，selectedStage都会设置为下拉列表中的第一项。

以下是Working sample with KO 3x

最后是实际部分。问题！

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

提前致谢。

Answer 1

我认为这与2. Bindings are now refreshed independently有关现在，您应该使用selectedChoice移出options绑定，例如

<div data-bind="with: selectedChoice">
   <select data-bind="options: stages, optionsText: 'name', value: selectedStage"></select>
</div>

Knockoutjs Dropdown预先选择嵌套Arbitary Javascript对象工作精细KO 2x版本不适用于KO 3x版本

1 个答案: