Question

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

这是申请表：

var Application = new Marionette.Application();

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

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

这是我的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();

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

Answer 1

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

Answer 2

只需删除标记名声明就可以了。您的视图根视图会将其插入到正文（您的区域el）中，为其自身创建一个div，它将成为它的基础。

如果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;
}

}）;

backbone.js / marionette.js全球区域：身体内部

2 个答案: