Магистральный вид ребенка и родительский вид не работают одновременно

Question

Я новичок в Backbone. Когда я пытался одновременно отображать как родительский, так и дочерний вид, было отображено только родительское представление! Я хочу знать, почему это происходит и каковы другие методы для этого?

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:

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

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

Answer 1

Есть много улучшений, которые можно были бы сделать, вот некоторые из них:

• Это ненужно использовать глобальный селектор JQuery, используйте this.$el для элемента отображения вида или this.$() для контекстного поиска JQuery.
• el берет строку или элемент DOM, а не объект jQuery.
• render должен быть идемпотентным и быстрым, не выбирайте шаблон каждый раз.
• .html() Функция немного тяжелее, чем просто .empty().append().
• Вы можете передать контекст для обратных вызовов .get() (success).
• Используйте .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

В parent view render function, child view el присваивается $('#main'), но к тому времени он не находится в DOM, поскольку родительский вид el не прикреплен к DOM, вы можете сделать следующее изменение, чтобы назначить дочерний вид html родительскому виду el.

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

$("#main") ищет элемент на DOM, this.$el.find("#main") ищет элемент в элементе потомков this.$el.