WHY does it initialize this component of Knockout.js in random order?

Question

I'm confused outside ...

I am creating a list using Knockout.js components, templates, and custom elements. For some reason, the steps that I create in mine Viewmodelare initialized in random order in the definition of the user element! And he is completely randomized, so he is different every time!

To better illustrate this, it is best to look at the JSFiddle . I put alert("break")after each step initialization. Download it once, and then click run again to see the demo correctly. Look in the output window and you can see that with the exception of the first step, the steps always appear randomly (although they save their order at the end).

https://jsfiddle.net/uu4hzc41/8/

I need to have them in the correct order, because I will add some attributes from my model to the array. When they are random, I cannot access the elements of the array properly.

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

Answer 1

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