Durandal 视图构图顺序

Question

Durandal 2.0 - 查看合成顺序

我有视图，它有许多子视图，我使用它们只是为了将 HTML 分解为单独的文件。

index.html(index.js)
     - menu.html
     - header.html
     - footer.html

菜单视图在加载后由索引视图填充。

在 index.html 中，我像这样编写菜单视图（没有模块 menu.js，这里只有 html 组合）：

<!--ko compose: {  view: 'menu'}--><!--/ko-->

问题在于视图组合的顺序。

我在 index.js 中连接了一个附加事件，然后调用一个函数来填充 menu.html 中的菜单 div。

但是，附加的视图事件被调用之前 menu.html 视图已被合成。

从控制台看事件如下所示：

Binding views/footer 
Binding views/index 
binding complete: <section data-view=​"views/​index" style=​"display:​ none;​">​…​</section>​
[Index]  Main View Attached 
Binding views/header 
Binding views/menu 
Binding views/menudropdown

因此，主视图附加在子视图之前。

有没有办法改变组合顺序，或者在主视图附加/完成之前等待所有子视图组合/加载？

谢谢

Answer 1

简短的回答是“否”——你不能改变作文顺序。

更长的答案：也许我误解了，但是您从视图模型中填充菜单 div 听起来有点可疑。您可以使用自定义绑定来代替吗？如果您可以在绑定中执行此操作，那么您可以看看使用Delayed Binding Handler。来自文档：

有时您的绑定处理程序只需要处理一个元素 在它附加到 DOM 之后，以及当它的整个组成 视图完成。这方面的一个例子是任何需要测量的代码 HTML 元素的大小。 Durandal 提供了一种注册方法 敲除绑定处理程序，以便它不会执行，直到 组成完成。为此，请使用 composition.addBindingHandler.

或者，如果您对 viewModel 中运行的任何代码感到满意，您可能希望使用 compositionComplete 事件而不是 attached 事件。根据记忆，attached 事件从父级运行到子级（这就是为什么在组成菜单之前在索引上调用事件的原因）。相比之下，compositionComplete bubbles from child to parent：

最后，当整个合成过程完成时，包括 任何父子组合，组合引擎将调用 compositionComplete(view, parent) 回调，从孩子冒泡到 父母。

您可以在 viewModel 上附加 compositionComplete 处理程序，其方式与激活方法相同：

// Secured Shell
define([], function () {
    var viewModel = {
        activate: function () {
            // do stuff
        },

        compositionComplete: function (parent, child, settings) {
            // do more stuff
            debugger;
        }
    };

    return viewModel;
});

希望对您有所帮助。