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

Question

Я за спутать ...

Я создаю список, используя 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/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

По умолчанию нагрузки на выбывание компоненты асинхронно. В 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 
});