<div class="container"> // this is the parent div template (already existing in the DOM prior to instantiating the View
模板:
<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');
}
})
};
在阅读了 el
甚至在 init 之前作为临时持有者创建的后,我不知道如何捕获类'.remove-measure-rep'
的点击。 我还在模板上验证了类remove-measure-rep
在模板内,而不是其他地方,因为似乎其他关于未捕获事件的 SO 问题涉及视图仅在自己的模板中查找类或 ID。 视图应该创建 HTML,并将其添加到 DOM 中。
如何让视图访问单击事件?,因为当我在 init 中将 el 设置为不同的值时,它没有注册。我单独尝试了其中的每一个,但它仍然不起作用。 它是否与在div 中设置模板,然后尝试将元素从模板绑定到 VIew 有关?
- 不要惹
this.el
.只需让主干为您定义视图的元素 - 在模板中,省略最外层的
<div>
标签,因为它将是主干标签 - 在
render
里面,只需设置你想要的ID
Backbone.View.extend({
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];
}
//don't mess with this.el at all
}
//Dispatch listeners
…
//Binding
//better to use listenTo here
this.listenTo(this.model, 'change', _.bind(this.render, this));
//I think initialize calling render is an antipattern. Discouraged.
this.render();
},
render: function(){
//Here you can set your dynamic ID
this.$el.attr('id', 'measure-cid' + this.model.id);
// 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
//view's appending themselves to the DOM is also an antipattern in my book, but anyway..
$(this.repContainerEl).append( compiledTemplate );
},
removeRepresentation: function(ev){
console.log('getting here');
}
})
};