gpt4 book ai didi

javascript - 为什么它以随机顺序初始化这个 Knockout.js 组件?

转载 作者:搜寻专家 更新时间:2023-10-31 08:28:18 25 4
gpt4 key购买 nike

超越感到困惑...

我正在使用 Knockout.js 组件、模板和自定义元素创建列表。出于某种原因,我在 Viewmodel 中创建的步骤在自定义元素定义中以随机顺序初始化!而且它是完全随机的,因此每次都不一样!

为了帮助更好地说明这一点,最好查看 JSFiddle .我在每个步骤初始化之后放置了 alert("break")加载一次,然后再次单击“运行”以正确查看演示。查看输出窗口,您可以看到除了先编写步骤 1 之外,步骤总是随机出现(尽管它们最终保持顺序)。

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/knockout :

//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());

最佳答案

默认情况下,knockout 组件是异步加载的。在 version 3.3添加了一个选项以允许组件同步加载。

在注册时添加 synchronous: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
});

关于javascript - 为什么它以随机顺序初始化这个 Knockout.js 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30789916/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com