ルート ハンドラー (ブラウザー アプリケーション) から backbone.js ビューを正常にレンダリングする際に問題が発生しています。
私のjavascriptモジュールは現在次のように設定されています:
$(function () { // DOM ready
myModule.Init();
});
var myModule = (function () {
// Models
var DonorCorpModel = Backbone.Model.extend({ });
// Collections
var DonorCorpsCollection = Backbone.Collection.extend({ model : DonorCorpModel });
// Views
var DonorCorpsListView = Backbone.View.extend({
initialize : function () {
_.bindAll(this, 'render');
this.template = Handlebars.compile($('#pre-sort-actions-template').html())
this.collection.bind('reset', this.render);
},
render : function () {
$(this.el).html(this.template({}));
this.collection.each(function (donorCorp) {
var donorCorpBinView = new DonorCorpBinView({
model : donorCorp,
list : this.collection
});
this.$('.donor-corp-bins').append(donorCorpBinView.render().el);
});
return this;
}
});
var DonorCorpBinView = Backbone.View.extend({
tagName : 'li',
className : 'donor-corp-bin',
initialize : function () {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.template = Handlebars.compile($('#pre-sort-actions-donor-corp-bin-view-template').html());
},
render : function () {
var content = this.template(this.model.toJSON());
$(this.el).html(content);
return this;
}
})
// Routing
var App = Backbone.Router.extend({
routes : {
'' : 'home',
'pre-sort' : 'preSort'
},
initialize : function () {
// ...
},
home : function () {
// ...
},
preSort : function () {
if (donorCorps.length < 1) {
donorCorps.url = 'http://my/api/donor-corps';
donorCorps.fetch();
}
var donorCorpsList = new DonorCorpsListView({ collection : donorCorps }).render().el;
$('#document-action-panel').empty().append(donorCorpsList);
// ...
}
});
// Private members
var app;
var donorCorps = new DonorCorpsCollection();
// Public operations
return {
Init: function () { return init(); }
};
// Private operations
function init () {
app = new App();
Backbone.history.start({ root: '/myApp/', pushState: true });
docr.navigate('/', { trigger: true, replace: true});
}
}(myModule || {}));
アプリを実行すると、すべてが正常に実行されます...期待どおりにホームビューに移動します。ハンドラーとのリンクを設定して、さまざまなルートに適切にナビゲートし、実行するapp.navigate('pre-sort', { trigger: true, replace: true})
と問題なく実行され、リスト内の期待されるアイテムが期待どおりにレンダリングされます。
問題は、ホーム ビューに戻ろうとしてから、並べ替え前のビューに戻ろうとしたときに発生します... リスト内の項目が期待どおりに画面に表示されません。子ビューが追加されていない空のpre-sort-actions-template
レンダリングを取得しています。コードをステップ実行したところ、コレクションにデータが入力され、項目がそこにあることがわかります...しかし、何らかの理由で、私のコードはそれらをビューに適切にレンダリングしておらず、理解できないようですなぜ、または私が間違っているのか。何か案は??私はバックボーンにかなり慣れていないので、このコードが完全に正しく書かれていないと確信しています...建設的なフィードバックを歓迎します. ありがとう。