バックボーンの子ビューと親ビューが同時に動作しません。

Question

私はバックボーンが初めてです。親ビューと子ビューの両方を同時にレンダリングしようとすると、親ビューだけがレンダリングされました！なぜこれが起こっているのか、これを達成するための他の方法は何ですか？

childView.js：

var ChildView = Backbone.View.extend({ 
    template: _.template($('#foo').html()), 
    initialize: function() { 
    }, 
    render: function() { 
    $(this.el).html(this.template({})); 
    return this; 
    } 
}); 

parentView.js：

var ParentView = Backbone.View.extend({ 
    el: $('body'), 
    initialize: function() { 
    this.childView = new ChildView(); 
    this.render(); 
    }, 
    render: function() { 
    var self = this; 
    $.get('templates/parentView.html', function(data) { 
     template = _.template(data, {}); 
     self.$el.html(template); 
    }, 'html'); 
    $('#main').html(this.childView.render().el); 
    }, 
}); 
var parentView = new ParentView(); 

parentView.html：で

Answer 1

作ることができるの改善の多くは、ここではいくつかありますされています

• それは、ビューの要素にthis.$elを使用し、jQueryのグローバルセレクタを使用する必要があります、またはスコープjQueryの検索のためのthis.$()。
• elは、jQueryオブジェクトではなく、文字列またはDOM要素をとります。
• renderは冪等で高速である必要があります。毎回テンプレートを取得しないでください。
• .html()機能はちょうど.empty().append()より少し重いです。
• .get()（成功）コールバックにコンテキストを渡すことができます。
• 既存の要素にビューを割り当てる場合は、.setElement()を使用します。

ChildView

var ChildView = Backbone.View.extend({ 
    template: _.template($('#foo').html()), 
    render: function() { 
     this.$el.empty().append(this.template({})); 
     return this; 
    } 
}); 

ParentView

var ParentView = Backbone.View.extend({ 
    el: 'body', 
    initialize: function() { 
     this.childView = new ChildView(); 

     $.get({ 
      url: 'templates/parentView.html', 
      success: this.onTemplateLoad, 
      context: this, 
      dataType: 'html' 
     }); 
    }, 
    render: function() { 
     this.$el.empty().append(this.template({ /** data */ })); 

     this.childView.setElement(this.$('#main')); 

     return this; 
    }, 

    onTemplateLoad: function(data) { 
     this.template = _.template(data, {}); 
     this.render(); 
    } 

}); 

インスタンス化

var parentView = new ParentView(); 

Answer 2

<header> 
    <h1>This is header</h1> 
</header> 
<main id="main"> 

</main> 
<footer> 
    <p>This is footer</p> 
</footer> 

親ビューrenderの機能、子ビューは$('#main')に割り当てられますが、親ビューとしてDOMにはありませんelがDOMに接続されていない場合、子ビューhtmlを親ビューelに割り当てるように変更できます。 DOMの要素の

this.$el.find('#main').html(this.childView.render().el); 
$(body).html(this.$el); 

$("#main")検索、this.$el.find("#main")検索this.$el要素の子孫の要素のために。