主干.js/marionette.js 全局区域：body inside body答案

【问题标题】：backbone.js/marionette.js global region: body inside body主干.js/marionette.js 全局区域：body inside body
【发布时间】：2013-06-05 22:18:50
【问题描述】：

在我的 index.html 中，<body> 标记为空。我有一个加载视图内容的视图（通过 icanhaz）。我想要一个全局区域（绑定到 body 标签）并通过视图将一些内容放入其中。我遇到的问题是它将整个新的正文标签放入现有的正文标签中。

这是应用程序：

var Application = new Marionette.Application();

Application.addRegions({
  bodyRegion: new Marionette.Region({el: "body"})
});

Application.addInitializer(function(options) {
    Application.bodyRegion.show(new RootView());
});

这是我的根视图：

Backbone.View.extend({
    tagName: 'body',

    initialize: function(options) {
        logger.init('root');
        loader.loadTemplate(template);
        this.headerView = new HeaderView();
        this.usersView = new UsersView();
    },

    render: function() {
        logger.render('root');
        this.$el.html(ich.rootTemplate);
        this.headerView.setElement(this.$el.find('#header')).render();
        this.usersView.setElement(this.$el.find('#main')).render();
        return this;
    }
});

这是我的 root.ich：

<script id="rootTemplate" type="text/html">
    <div id="header"></div>
    <div class="container" id="main"></div>
</script>

我遇到的问题是，渲染后我在另一个标签内有一个标签。如果我不使用 Marionette 而是使用普通的主干视图，请使用以下几行：

var rootView = new RootView();
rootView.setElement('body').render();

一切正常。我做错了什么？

【问题讨论】：

标签： templates backbone.js marionette

【解决方案1】：

tagName: 'body', 创建一个新的body 元素（您的第二个）。如果您的元素必须是主体，请使用el: 'body'，tagName 用于为没有主体的视图创建一个新元素。

【讨论】：

然后我从Application.bodyRegion.show(new RootView());这一行得到Uncaught Error: HierarchyRequestError: DOM Exception 3
不知道Marionnette，我猜你的视图元素不可能是该区域的元素？
不，看起来不是这样，但你肯定遇到了一些 DOM 插入错误。

【解决方案2】：

只需删除标记名声明就可以了。您的视图根视图将插入到主体（您的区域 el）中，为自己创建一个 div，该 div 将成为其在 el 上。

如果一个 div 是不可接受的，并且您需要区域 el 作为主体，那么更改您的地区声明

Application.addRegions({
    bodyRegion:"body" // this will create your new region just fine with body as its el
});

你的视图应该是这样的......

Backbone.View.extend({
el: 'body',  // with this line your view will be atached to an existing element in this case the body.


initialize: function(options) {
    logger.init('root');
    loader.loadTemplate(template);
    this.headerView = new HeaderView();
    this.usersView = new UsersView();
},

render: function() {
    logger.render('root');
    this.$el.html(ich.rootTemplate);
    this.headerView.setElement(this.$el.find('#header')).render();
    this.usersView.setElement(this.$el.find('#main')).render();
    return this;
}

});

【讨论】：