爲什麼它會以隨機順序初始化這個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 /基因敲除：

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