0

私の index.html には空の<body>タグがあります。ビューのコンテンツを読み込むビューがあります (icanhaz を使用)。グローバル領域 (ボディタグにバインド) を持ち、ビューを介してその中にいくつかのコンテンツを配置したいと考えています。私が抱えている問題は、新しい body タグ全体を既存の 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();

すべて正常に動作します。私は何を間違っていますか？

4

2 に答える 2

0

tagname 宣言を削除するだけで問題ありません。あなたのビューのルートビューは、ボディ（あなたの地域のエル）に挿入され、その上にあるそれ自体の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;
}

});

于 2013-06-06T00:16:23.790 に答える
0

tagName: 'body',新しいbody要素 (2 番目の要素) を作成します。el: 'body'要素がボディでなければならない場合に使用tagNameし、ビューの要素を持たない新しい要素を作成するために使用されます。

于 2013-06-05T22:25:18.367 に答える