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是正确呈现的，但其他视图却没有。我怀疑这是因为，由于某种原因，他们没有看到IndexView创建的#container元素。我这样说是因为如果我将这些视图呈现给body元素，那么它们就可以了。

有什么建议吗？提前谢谢！

Answer 1

你的问题是分配el的语句被评估为早期（即在定义视图时进行评估，而不是在创建索引视图之前的实际视图时进行评估）你应该做的是在实例化视图时传递el，或者你可以在视图的initialize方法中手动分配它。

例如传递el

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

在Backbone.JS中使用嵌套视图

1 个答案: