Javascript 为什么它会随机初始化这个Knockout.js组件？

我被弄糊涂了

我正在使用Knockout.js组件、模板和自定义元素创建一个列表。出于某种原因，我在

Viewmodel

中创建的步骤在自定义元素定义中以随机顺序初始化！而且它是完全随机的，所以每次都是不同的

为了更好地说明这一点，最好看一下。我在每一步初始化后都会发出

警报（“中断”）

加载一次，然后再次单击“运行”以正确查看演示。查看“输出”窗口，您可以看到，除了第一步编写之外，步骤总是随机出现（尽管最后它们保持顺序）

我需要将这些属性按正确的顺序排列，因为我要将模型中的某些属性添加到数组中。当它们是随机的时，我无法正确访问数组元素

HTML:

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

//自定义元素
ko.components.register（“侧边栏步骤”{
viewModel:函数（参数）{
this.vm=params.vm；
警报（“中断”）；
},
模板：“
vm.onchangelement
”
});
//模型
var SidebarStepModel=函数（）{
this.message=ko.observable（“步骤描述”）；
};
//视图模型
var OrderGuideViewModel=函数（）{
this.sidebarStepModel0=新的SidebarStepModel（）；
此.sidebarStepModel0.message（“步骤1”）；
this.sidebarStepModel1=新的SidebarStepModel（）；
此.sidebarStepModel1.message（“步骤2”）；
this.sidebarStepModel2=新的SidebarStepModel（）；
此.sidebarStepModel2.消息（“步骤3”）；
this.sidebarStepModel3=新的SidebarStepModel（）；
此.sidebarStepModel3.消息（“步骤4”）；
this.sidebarStepModel4=新的SidebarStepModel（）；
此.sidebarStepModel4.消息（“步骤5”）；
};
应用绑定（新的OrderGuideViewModel（））；

默认情况下，敲除组件异步加载。在中，添加了一个选项以允许组件同步加载

Add 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
});

ko.components.register（“侧边栏步骤”{
viewModel:函数（参数）{
this.vm=params.vm；
警报（“中断”）；
},
模板：“
vm.onchangelement
”，
同步：对
});

Wow，我认为这是一个复杂问题的简单答案！我甚至没有想到异步操作！这是最新的提琴供任何关心它的人使用——你现在可以看到这些步骤按正确的顺序加载了-

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
});