1

我正在使用 Backbone.JS 开发一个应用程序，包括一个带有菜单的主视图 (IndexView)、一个 HTML5 视频循环和一个用于内容的 div (#container)。这个想法是，当应用程序初始化时，根据路由，视图将被渲染并显示在#container 元素上。无论路线如何，都应始终显示 IndexView。这就是我所拥有的：

路由器.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 元素，它们就可以了。

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

4

1 回答 1

0

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

例如传入el

var myAboutView = new AboutView({el: $('#container')};
于 2013-10-02T12:29:56.660 回答