1

メニュー付きのメイン ビュー (IndexView)、HTML5 ビデオ ループ、およびコンテンツ用の div (#container) で構成される Backbone.JS を使用してアプリを開発しています。アプリが初期化されると、ルートに応じてビューがレンダリングされ、#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 に答える