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)回调，从孩子冒泡到父节点。

您可以使用与activate方法相同的方式在viewModel上附加compositionComplete处理程序：

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

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

    return viewModel;
});

希望有所帮助。

Durandal视图组成顺序

1 个答案: