Question

在this fiddle中，我在Backbone.Marionette应用程序中有一个问题的虚拟代码。

当我定义布局时，即使$ el的长度为1，它也不会插入到页面中。但是如果我让元素使用默认配置，即div，那么一切都有效。

以下是声明Application的代码，为其定义主区域，创建新布局和项目视图：

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

        App.addRegions({
            page: "#page"
        });

        App.PageLayout = Backbone.Marionette.Layout.extend({
            template: "#page-template",
            className: "container",
            regions: {
                header: "#main-header",
                content: "#main-content",
                footer: "#main-footer"
            }
        });

        App.HeaderView = Backbone.Marionette.ItemView.extend({
            initialize: function() {
                console.log(this.$el.length); // 1
            },

            el: "#main-header",
            template: "#header-template",
        });

        App.FooterView = Backbone.Marionette.ItemView.extend({
            initialize: function() {
                console.log(this.$el.length); // 1
            },
            el: "#main-footer",
            template: "#footer-template"
        });

        App.ContentView = Backbone.Marionette.ItemView.extend({
            initialize: function() {
                console.log(this.$el.length); // 1
            },
            el: "#main-content",
            template: "#content-template"
        });



        App.on("initialize:after", function() {
            var pageLayout = new App.PageLayout;

            App.page.show(pageLayout);

            pageLayout.header.show(new App.HeaderView);
            pageLayout.content.show(new App.ContentView);
            pageLayout.footer.show(new App.FooterView);
        });

        App.start();

模板：

<script id="header-template" type="text/template">
        Awesome Inc.
    </script>
    <script id="footer-template" type="text/template">
        <li> <a href="#">Like us on Facebook</a> </li>
        <li> <a href="#">Tweet us</a> </li>
        <li> <a href="#">Hate us on Hatey.com</a> </li>
    </script>
    <script id="page-template" type="text/template">
        <header id="main-header"></header>
        <section id="main-content"></section>
        <footer id="main-footer"></footer>
    </script>
    <script id="footer-template" type="text/template">
        <li> <a href="#">Like</a> </li>
        <li> <a href="#">Tweet us</a> </li>
        <li> <a href="#">Hate</a> </li>
    </script>
    <script id="content-template" type="text/template">
        <h1>Welcome to this World</h1>
    </script>

最后，页面中的主要元素：

<main id="page">Loading...</main>

我需要布局来查找已呈现的区域（因为App实例已经处理了该区域）并将相关的ItemView内容附加到其中。

我想知道我是否遗漏了一些非常明显的东西。

任何帮助都会很棒！

修改

经过@DavidSulc的一些指示，我发现我无法按照我需要的方式做到这一点。

这意味着我无法在布局中创建一些区域，附加一些项目视图，使项目视图与布局中定义的区域相同。所以我将学会喜欢在该地区内创建的额外div。在我看来，这只会导致额外的和不需要的标记 - 为什么我不能使用该区域的元素，只要它已经渲染？如果有另一种方法可以做到这一点，我将不胜感激。

Answer 1

这是一个工作分叉：http://jsfiddle.net/hR4Sx/1

一些指示：

您不应在视图中定义el属性
您的区域需要出现在页面上
管理布局的最佳方法是在显示布局本身时呈现其子视图

无耻插件：my Marionette book涵盖了此类信息（以及更多！），或者您可以查看代码here，如果您宁愿自己学习......

木偶布局：明确定义时不会渲染$ el

1 个答案: