backbone.js のサブビューに大きな問題があります。2 つのビューがあり、2 番目のビューを最初のビューの要素にレンダリングしたいと考えています。したがってthis.el、最初のビューのセクション (section#user-data) を参照する 2 番目のビューで定義しました。
最初のビューがレンダリングされた後に 2 番目のビューのオブジェクトを作成します。オブジェクトを作成するalert($('#user-data').length)前に書き込むと
、 1が返されて存在します。
しかし、2番目のビュー内では未定義になります。this.el任意の方法でログインした場合。しかし、たとえば body を使用すると、this.elすべてが期待どおりに機能します。
その理由は何ですか？
例：
/**
* The example of a view for profile's component
*
*
* @module Profile
* @submodule Frontend
* @class ProfileView
* @constructor
*
*/
ProfileView = Backbone.View.extend({
// The tagname wrapping the rendered content
// The template for the current view
template : _.template('COMPONENTS_VIEW_FRAME'),
/**
* The initialisation for the current view (kind of constructor)
*
* @method initialize
*/
initialize : function() {
},
/**
* The rendering process for the current view
*
* @method render
* @param {String} oLocas the data to render inside this view
*/
render : function(oLocas) {
$(this.el).html(this.template(oLocas));
return this;
}
});
/**
* The example of a view for profile's component
*
*
* @module Profile
* @submodule Frontend
* @class ProfileView
* @constructor
*
*/
ProfileSectionView = Backbone.View.extend({
// The tagname wrapping the rendered content
// The template for the current view
template : _.template('COMPONENTS_VIEW_OPTION_SECTION'),
el : $('#user-data'),
events : {
'click a.open_close_section' : 'doIt'
},
headline : 'ddd',
/**
* The initialisation for the current view (kind of constructor)
*
* @method initialize
*/
initialize : function() {
alert($(this.el).length);
},
doIt : function(event) {
alert('jo');
},
/**
* The rendering process for the current view
*
* @method render
* @param {String} eventName the name of the triggered event
*/
render : function(oLocas) {
$(this.el).html(this.template(oLocas));
return this;
}
});
// Here I start to use the first view
var oProfileView = new ProfileView();
$('#profile').html(oProfileView.render().el).fadeIn(500, function() {
$(this).removeClass('closed');
// Here I create the second view
var oProfileSectionView = new ProfileSectionView({
model : this.model
});
oProfileSectionView.render({
headline : 'XXX',
sectionrows : 'ddd'
}).el;
});