我 超越 困惑......
我正在使用Knockout.js组件,模板和自定义元素创建一个列表。出于某种原因,我在Viewmodel
中创建的步骤正在自定义元素定义中以随机顺序初始化!并且它是完全随机的,因此每个时间不同!
为了更好地说明这一点,最好查看JSFiddle。我在每个步骤初始化后放了alert("break")
。 加载一次,然后再次单击“运行”以正确查看演示。 查看输出窗口,您可以看到除了第一步写入之外的其他内容,步骤始终随机(尽管它们最终会保持顺序)。
https://jsfiddle.net/uu4hzc41/8/
我需要按正确的顺序排列这些,因为我会将模型中的某些属性添加到数组中。当它们是随机的时,我无法正确访问数组元素。
HTML:
<ul>
<sidebar-step params="vm: sidebarStepModel0"></sidebar-step>
<sidebar-step params="vm: sidebarStepModel1"></sidebar-step>
<sidebar-step params="vm: sidebarStepModel2"></sidebar-step>
<sidebar-step params="vm: sidebarStepModel3"></sidebar-step>
<sidebar-step params="vm: sidebarStepModel4"></sidebar-step>
</ul>
JS /敲除:
//custom element <sidebar-step>
ko.components.register("sidebar-step", {
viewModel: function (params) {
this.vm = params.vm;
alert("break");
},
template: "<li data-bind='text: vm.message'>vm.onChangeElement</li>"
});
// model
var SidebarStepModel = function () {
this.message = ko.observable("step description");
};
// viewmodel
var OrderGuideViewModel = function () {
this.sidebarStepModel0 = new SidebarStepModel();
this.sidebarStepModel0.message("step 1");
this.sidebarStepModel1 = new SidebarStepModel();
this.sidebarStepModel1.message("step 2");
this.sidebarStepModel2 = new SidebarStepModel();
this.sidebarStepModel2.message("step 3");
this.sidebarStepModel3 = new SidebarStepModel();
this.sidebarStepModel3.message("step 4");
this.sidebarStepModel4 = new SidebarStepModel();
this.sidebarStepModel4.message("step 5");
};
ko.applyBindings(new OrderGuideViewModel());
答案 0 :(得分:3)
默认情况下,knockout组件异步加载。在version 3.3中添加了一个选项以允许组件同步加载。
添加同步:注册时为true以获得所需的行为。
示例:
ko.components.register("sidebar-step", {
viewModel: function (params) {
this.vm = params.vm;
alert("break");
},
template: "<li data-bind='text: vm.message'>vm.onChangeElement</li>",
synchronous: true
});