为啥它以随机顺序初始化这个 Knockout.js 组件？

Posted 2023-03-27

【中文标题】为啥它以随机顺序初始化这个 Knockout.js 组件？

【英文标题】：WHY does it initialize this Knockout.js component in random order?为什么它以随机顺序初始化这个 Knockout.js 组件？

【发布时间】：2015-08-27 16:29:39

【问题描述】：

我超越困惑...

我正在使用 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/淘汰赛：

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

【参考方案1】：

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

注册时添加 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
);

【讨论】：

哇，这么简单的答案就我认为是一个复杂的问题！我什至没有想到异步操作！这是任何关心的人的更新小提琴 - 您现在可以看到步骤以正确的顺序加载！ - jsfiddle.net/uu4hzc41/9