8

テンプレートをテンプレート内にネストして、バックボーン ビューからアクセスすることは可能ですか?

たとえば、Template1 を使用する View1 と Template2 を使用する View2 があります。Template2 は、実際には Template1 内の DIV にある必要があります。template2 の DIV コンテナーを template1 内に適切な ID で配置しましたが、ページがレンダリングされたときに表示されません。Template1 内から Template2 div コンテナーを削除し、それをページ本文に入れるだけで問題なく動作します。

これが可能かどうか、またはこれを機能させるためにビュー/モデルなどをネストする必要があるかどうか疑問に思っていますか?

Template2 のデータは、技術的には Template1 に関連していません。Template1 に埋め込まれたページ上の位置に表示する必要があるだけです。

4

5 に答える 5

21

私が過去にこれに対処した方法は、両方のビューを別々に定義し、View1 をレンダリングするときに、新しい View2 を作成し、それをレンダリングして、View1 に挿入することでした。そう：

window.View1 = Backbone.View.extend({
    render: function() {
        this.view2 = new View2();
        this.$('insert-view-here').append(this.view2.render().el);
    }
});
于 2012-05-18T21:13:11.047 に答える
4

このためのサブビューを作成する必要があります。

私はクロージャでサブビューをプライベート化し、パブリック ビューを返すのが好きです。

var View = (function (BV) {
    var View, Subview;

    // Only this main view knows of this subview
    Subview = BV.extend({ 
        template: _.template( subtmpl ),

        render: function () {
            this.$el.html( this.template( this.model.toJSON() ) );
            return this;
        }   
    }); 

    View = BV.extend({
        template: _.template( tmpl ),

        render: function () {
            this.$el.html( this.template( this.model.toJSON() ) );

            var subview = new SubView({ model: this.model }); 

            // replace a div in your template meant for teh subview with the real subview
            this.$el.find( "#subview" ).replaceWith( subview.render().el );

            return this;
        }   
    }); 

    return View;

}(Backbone.View));

var view = new View({ model: user });
var subview = new Subview; // Reference Error
于 2012-05-18T23:36:46.703 に答える
0

私が理解している典型的な方法は、ビューを相互に埋め込むことができる完全なオブジェクトと考えることです。ViewA と ViewB の 2 つのビューがあるとします。次のコードは、ViewB を ViewA に追加する方法を示しています。

# this is coffeescript, but it's easily translated to JS
class ViewA extends Backbone.View
    initialize: () ->
        this.render()

    render: ()->
        this.$el.append(new ViewB().$el)
        this.$el.append(new ViewB().$el)
        return this

ViewB の管理方法 (プロパティなどに割り当てる方法) に夢中になるか、各 ViewB インスタンスに異なるコンストラクター引数を渡すことができます。

于 2012-05-18T21:17:19.530 に答える