5

バックボーン ビューをネストする推奨される方法を教えてください。

ビューをネストする可能な方法:

  1. すべてのビューをレンダリングし、それらをルーターにまとめる
  2. ルーターで呼び出されるすべてのネスティングを IndexView に行わせる
  3. アンダースコア テンプレートにビューを含める

私はすでにこのフィドルで運を試しました: http://jsfiddle.net/m48Nc/2/

注釈: この例が機能しないことはわかっていますが、構造を示しているだけです。現在わかっていますが、満足していません。

では、どちらに行くべきでしょうか？リンクも大歓迎です;）

アップデート：

fguillen の回答と、私が見つけた別のスレッドを使用して、次のことができます。

var IndexView = Backbone.View.extend({

    tagName: "div",

    className: "container",

    template: LayoutTemplate,

    render: function() {
        this.$el.html(LayoutTemplate);

        this.$('div.content').html(ContentTemplate);
        this.$('div.sidebar').append(new LoginView().render().el);
        this.$('div.sidebar').append(new RegistrationView().render().el);

        return this;
    }

});
4

2 に答える 2

2

非常に複雑な要素を互いに動的に追加するためにテンプレートを使用しています。テンプレートは、非常に単純な Model.attributes を動的に追加することを目的としています。

MenuViewのテンプレートは使用しません。Menu フレームを通常の要素として HTML DOM に定義し、MenuView をインスタンス化して、この DOM 要素を次のView.elように割り当てます。

var menuView = new MenuView({ el: "#menu" });

次に、サブビューを MenuView にレンダリングするために、 jQuery を使用しappend、htmlさらに操作jQuery 機能を使用します。

// code simplified and not tested
var MenuView = Backbone.View.extend({
  render: function(){
    // the this.$el is already rendered

    // list of elements
    this.collection.each( function( model ){
      var modelView = new ModelView({ model: model });
      this.$el.append( modelView.render().el );
    }, this);

    // additional subViews
    var loginView = new LoginView();
    this.$el.find( "div#login" ).html( loginView.render().el );

    // another way to add subViews
    var loginView = new LoginView({ el: this.$el.find( "div#login" ) });
    loginView.render();
  }
});
于 2012-07-25T16:31:13.000 に答える
0

http://ricostacruz.com/backbone-patterns/#view_patternsをご覧ください

ニーズに基づいてビューを構成する方法の優れた例があります。

于 2012-07-26T17:17:28.910 に答える