Работа с вложенными представлениями в Backbone.JS

Question

Я разрабатываю приложение с Backbone.JS, состоящее из основного вида (IndexView) с меню, видеоконтура HTML5 и div для контента (#container). Идея заключается в том, что при инициализации приложения в зависимости от маршрута представление будет отображаться и отображаться в элементе #container. Независимо от маршрута, IndexView всегда должен отображаться. Это то, что у меня есть:

router.js:

var initialize = function() { 
    // The IndexView will be rendered when the app is initialized 
    console.log("Rendering index view..."); 
    var indexView = new IndexView(); 
    indexView.render(); 

    var app_router = new AppRouter; 

    // One of the routes 
    app_router.on('route:about', function() { 
     var aboutView = new AboutView(); 
     aboutView.render(); 
    }); 

    // Other routes here… 
    Backbone.history.start(); 
}; 

return { 
    initialize: initialize 
}; 

просмотров/index.js:

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'text!templates/index.html' 
], function ($, _, Backbone, indexTemplate) { 
    var IndexView = Backbone.View.extend({ 
     el : $("body"), 
     render : function() { 
      var data = {}; 
      var compiledTemplate = _.template(indexTemplate, data); 
      this.$el.html(compiledTemplate); 
     } 
    }); 

    return IndexView; 
}); 

просмотров/about.js:

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'text!templates/about.html' 
], function ($, _, Backbone, aboutTemplate) { 
    var AboutView = Backbone.View.extend({ 
     el : $("#container"), 
     render : function() { 
      var data = {}; 
      var compiledTemplate = _.template(aboutTemplate, data); 
      this.$el.html(compiledTemplate); 
     } 
    }); 

    return AboutView; 
}); 

Ну, проблема в том, что IndexView визуализируется правильно, а другие - нет. Я подозреваю, что это потому, что по какой-то причине они не видят элемент #container, созданный IndexView. Я говорю это, потому что, если у меня есть эти представления рендеринга для элемента body, они делают это просто отлично.

Любые предложения? Заранее спасибо!

Answer 1

Ваша проблема заключается в том, что оператор, назначающий el, оценивается до раннего (то есть он оценивается, когда ваше представление определяется, а не когда вы создаете фактическое представление, которое находится перед представлением индекса. вы должны сделать либо пройти в el, когда вы экземпляр вид или вы можете вручную назначить его в методе инициализации вашего зрения.

Например, чтобы передать в el

var myAboutView = new AboutView({el: $('#container')};