<div class="container"> // this is the parent div template (already existing in the DOM prior to instantiating the View
HTML テンプレート:
<div id="measure-cid1"> // the number is dynamic
<div class="row-fluid">
<div class="remove-measure-rep"><i class="icon-minus"</i></div>
</div>
…other stuff…
</div>
<div id="measure-cid2">
<div class="row-fluid">
<div class="remove-measure-rep"><i class="icon-minus"</i></div>
</div>
…other stuff…
</div>
… multiple other 'measure-cid*'s
// remaining portion from the parent div template
</div>
BB JS ビュー:
define([…], …){ //using require
return Backbone.View.extend({
// I can not define the el here, as it is dynamic, so I have to set it in the init
events : {
'click .remove-measure-rep' : 'removeRepresentation',
'click' : 'removeRepresentation'
},
initialize: function(options){
if (options) {
//passing options.* to this view as this.*
for (var key in options) {
this[key] = options[key];
}
console.log(this.el); // I get `<div></div>`
this.el = '#measure-rep-'+this.measureRepModel.cid;
console.log(this.el); // This returns `#measure-rep-c28`
this._ensureElement();
console.log(this.el); //This returns `undefined`
this._ensureElement($('#measure-rep-'+this.measureRepModel.cid));
console.log(this.el); //this returns `<div></div>`
this.setElement($('#measure-rep-'+this.measureRepModel.cid));
console.log(this.el); // this returns `undefined`
}
//Dispatch listeners
…
//Binding
this.model.bind('change', _.bind(this.render, this));
this.render();
},
render: function(){
// I attach the template to its parent div
var compiledTemplate = _.template( MeasureRepTemplate, measureRepTemplateParamaters );
// put in the rendered template in the measure-rep-container of the measure
$(this.repContainerEl).append( compiledTemplate );
},
removeRepresentation: function(ev){
console.log('getting here');
}
})
};
init の前に一時的なホルダーとしても作成されることを読んだ後el
、クラスのクリックをキャプチャする方法がわかりません'.remove-measure-rep'
。また、クラスremove-measure-rep
がテンプレート内にあり、他の場所にないことをテンプレートで確認しました。これは、独自のテンプレート内でのみクラスまたは ID を探しているビューでイベントをキャプチャしないことに関する他の SO の質問のようです。ビューは HTML を作成し、それを DOM に追加する必要があります。
ビューがクリック イベントにアクセスできるようにするにはどうすればよいですか? init で el を別の値に設定すると登録されないためです。私はそれらのそれぞれを個別に試しましたが、まだ機能していません。テンプレートを div に設定してから、要素をテンプレートからビューにバインドしようとすることと関係がありますか?