ПОЧЕМУ он инициализирует этот компонент Knockout.js в случайном порядке?

Question

Я запутался...

Я создаю список, используя компоненты 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());

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