変更イベントをビューモデルにバインドして、ビューを自己レンダリングしようとしています。Pagesコレクションからモデルをパラメーターとして取得し、this.model.set（data）を使用してモデル変更イベントをトリガーするカスタム関数をPageViewで作成しました。これは、AppViewのPagesコレクションからthis.page.load（Pages.at（index））を介してPageモデルを渡すとトリガーされます。しかし、私はいくつかの問題に直面しています。
- 変更イベントは、2つの異なるモデルを切り替えるときに1回だけ発生します。これは、this.model.clear（{silent：true}）を実行することで解決できますが、これは理想的ではありません。
- this.modelは、PageView内のload（）関数以外の関数では常に未定義です。これは、モデルが未定義の場合、明らかにthis.renderを起動できないため、実際に主な問題です。したがって、test：function（）。
とにかく、これが私のAppView関数とPageView関数のコードです。助けてくれてありがとう。
define([
// These are path alias that we configured in our bootstrap
'jquery',
'underscore',
'backbone',
'handlebars',
'views/pageView',
'views/menuView',
'collections/pages'
], function($, _, Backbone, Handlebars,PageView,MenuView,Pages){
var AppView = Backbone.View.extend({
//Stores a reference to our main menu
mainMenu:{},
//Stores reference to current page
page:{},
//The parent div
el:'#app',
//Events that are being listened to on #app
events:{"click" : "active"},
//Process to run when this view is initialized
initialize:function(){
//Load our Pages Collection
Pages.reset(this.model.pages);
//Load the main menu
this.mainMenu = new MenuView;
this.mainMenu.model = this.model.main_menu;
this.mainMenu.render();
//Loads the page view
this.page = new PageView({model:Pages.at(0)});
},
//Currently just renders a page view with a designated model from the Pages collection
render:function(index){
this.page.load(Pages.at(index));
},
active:function(event){
$('.menu a').removeClass('active');
$('.menu a[href="' + event.target.hash + '"]').addClass('active');
}
});
return AppView;
// What we return here will be used by other modules
});
define([
// These are path alias that we configured in our bootstrap
'jquery',
'underscore',
'backbone',
'handlebars',
'text!templates/page.html',
], function($, _, Backbone, Handlebars, pageViewTemplate){
var PageView = Backbone.View.extend({
//Define the default template
template: Handlebars.compile(pageViewTemplate),
//The parent div for this element
el:'#content',
initialize:function(){
this.model.bind('change',this.test);
},
load:function(data){
this.model.set(data);
},
//Render function
render:function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
},
test:function(){
console.log(this.model);
console.log('change');
}
});
return PageView;
// What we return here will be used by other modules
});