Durandal View 组合顺序

Question

Durandal 2.0 - 查看组合顺序

我有一个 View ，它有许多我用来将 HTML 分解成单独文件的 subview 。

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

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

在 index.html 中，我这样组合菜单 View (没有模块 menu.js，这里只有 html 组合):

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

问题是 View 组合的顺序。

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

但是，附加的 View 事件在 menu.html View 被组合之前被调用。

从控制台看，事件看起来像这样:

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

所以，主视图附加在 children 之前。

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

谢谢

Answer 1

简短的回答是“否”——您不能更改组合顺序。

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

Sometimes your binding handler needs to work with an element only after it is attached to the DOM and when the entire composition of the view is complete. An example of this is any code that needs to measure the size of an HTML element. Durandal provides a way to register a knockout binding handler so that it does not execute until the composition is complete. To do this, use composition.addBindingHandler.

或者，如果您对 viewModel 中运行的任何代码感到满意，您可能希望使用 compositionComplete 事件而不是 attached 事件。从内存中，附加 事件从父级运行到子级(这就是为什么在组合菜单之前在索引上调用该事件的原因)。相比之下，compositionComplete bubbles from child to parent :

Finally, when the entire composition process is complete, including any parent and child compositions, the composition engine will call the compositionComplete(view, parent) callback, bubbling from child to parent.

您可以使用与激活方法相同的方式在您的 viewModel 上附加一个 compositionComplete 处理程序:

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

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

    return viewModel;
});

希望对您有所帮助。