Backbone.js 木偶布局：$el在显式定义时不渲染

在一个主干网木偶应用程序中，我有一个$el问题的伪代码

定义布局时，即使$el的长度为1，也不会将其插入页面。但是如果我让元素使用它的默认配置，即div，那么一切都可以正常工作

以下是声明应用程序、为其定义主区域、创建新布局和项目视图的代码：

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>

真棒公司。






欢迎来到这个世界

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

<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>

正在加载。。。

我需要该布局来查找渲染的区域（因为应用程序实例已经处理了该区域），并将相关的ItemView内容附加到该区域

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

任何帮助都会很好

编辑

在@DavidSulc给出了一些建议之后，我发现我无法按照我需要的方式来做这件事

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

这里有一个工作叉：

几点建议：

• 您不应该在视图中定义

  el

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

---

无耻插件：涵盖此类信息（以及更多！），如果您想自己学习，也可以查看代码…

嘿，David，谢谢您的帮助。顺便说一句，我现在正在读你的书。这对我帮助很大。我知道你在那里做了什么，但我的问题是我不想让div标记包装我的主标题模板，这就是我定义el的原因，因此它将使用“#main header”元素，该元素以前由应用程序“show”方法呈现。以及视图呈现时所处的区域（注意视图初始值设定项中的“console.log（this.$el）”。您能否解释更多关于“在我的视图中不定义el”的评论"？为什么这是一种不好的做法？Thx很多。为了澄清这一点，您可以在视图中指定

el

，但您很少这样做，因为通常您会创建自己的视图来承载视图。您的问题是，您试图使用相同的DOM元素同时充当区域容器和视图容器。这样做似乎不是一个好主意视图基本上必须包含在它自己的DOM节点中，但您可以定义哪一个（而不是

div

）使用

标记名

属性。你能给我发一本你的书的免费版本吗，我对主干网非常感兴趣。jsI认为问题在于每个视图/区域的处理程序。由于它们依赖于DOM，如果区域和视图共享同一个元素，如果要替换视图或完全删除区域？以不同的方式跟踪视图和区域可能会使基础库复杂化。我当然同意这很烦人，但我已经学会了以一种使其工作的方式来设计我的div和样式。