Question

假设我有这个页面，我希望将子视图的内容正确插入ParentLayoutView。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>test marionette</title>
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/underscore/underscore.js"></script>
    <script src="bower_components/backbone/backbone.js"></script>
    <script src="bower_components/backbone.wreqr/lib/backbone.wreqr.js"></script>
    <script src="bower_components/marionette/lib/core/backbone.marionette.js"></script>
</head>
<body>
    <div id="layout_container">
        Parent content
        <div id="child">initial content of child</div>
    </div>
<script>

    'use strict';

    window.alert("Start the application!");

    var App = new Backbone.Marionette.Application();

    App.addRegions({
        mainRegion: "#layout_container"
    });

    var ParentLayoutView =  Marionette.LayoutView.extend({
        template: '<div class="this is a parent template">Parent content after show()</div>',
        regions:  {
            childRegion:     {
                el: "#child"
            }
            //childRegion: "#child" //BTW, this is does not work, it throws "#child not in DOM" error
        },

        onBeforeShow: function () {
            this.showChildView('childRegion', new childView());
        },
        onShow: function () {
            window.alert("Now child template is replaced by parent without attached child");
        }
    });

    var childView =  Marionette.ItemView.extend({
        template: '<div class="this is a CHILD template">Child class content after show()</div>',
        onShow: function () {
            window.alert("We showed child view!");
        }
    });

    App.on('start', function () {

        var layout = new ParentLayoutView();
        App.mainRegion.show(layout);
    });

    App.start();

</script>
</body>
</html>

但是我在渲染子视图并将其插入DOM（为什么？）后得到它，然后ParentLayoutView完全替换它，所以我只看到父内容。我希望在Parent中看到Child内容，就像任何服务器端模板引擎一样。我认为所有工作必须在内存中进行，并且只需在进程结束时插入#layout_container中的一个根节点。因此，必须渲染所有嵌套的子项并将它们相互连接，并且只有最多的父视图必须插入DOM中。我读了这个http://marionettejs.com/docs/v2.4.2/marionette.layoutview.html#efficient-nested-view-structures

Answer 1

在mainRegion中显示布局视图时，将替换该元素的当前内容。因此，#child div消失，#layout_container的内容成为ParentLayoutView模板中的内容。但该模板没有#child元素，因此该区域无效，并且没有地方放置子视图。

相反，请确保ParentLayoutView的模板包含该元素的完整HTML，包括#child div。

Answer 2

非常感谢凯文，它按预期工作。所以我注意到我的问题是region.el和region.selector属性之间的误解。我用了 childRegion：{ el：＆＃34; #child＆＃34; } 因为我没有提供模板。如果没有为布局视图提供模板，则只有此选项可以在没有错误的情况下呈现布局视图＆＃34;在DOM中错过el＆＃34;。

但是如果指定一个带有#child inside和用户区域的选择器选项的模板 childRegion：＆＃34; #child＆＃34; 一切都会好的，DOM操作只发生一次，DOM树正确插入所有子布局。

因此每个布局视图必须有一个模板才能正确使用区域。

如何使用木偶嵌套布局视图？

2 个答案: