骨干click事件模板视图不点火 [英] Backbone click event not firing in template View
问题描述
我的工作是基于动态模板的骨干应用。我有一个头视图，侧面板视图和页脚视图调用任何其它视图时动态初始化。
问题是我有未开通每个模板视图事件。比如我有一个按钮，改变语言头的看法，但它的事件不点火。
I am working on a Backbone application which is based on a dynamic template . I have a header view, a side panel view and footer view that are dynamically initialized when calling any other view . The problem is I have events on each template view that are not firing. For example i have a button that changes the language in the header view but its event isn't firing.
我的头查看：
define([ "jquery", "backbone", "text!../../pages/header.html" ], function($,
Backbone, headerTpl) {
var header = Backbone.View.extend({
events : {
"click #enBtn":"swichToEnglish",
"click #frBtn":"swichToFrench"
},
initialize : function(options) {
_.bindAll(this, "swichToFrench","swichToEnglish");
this.render(options.parent);
//$("#enBtn").css("pointer-events","none");
},
render : function(parent) {
this.template = _.template(headerTpl);
$(parent).append(this.template);
return this;
},
swichToFrench:function(){
console.log("switch to frensh");
if(i18n.currentLocal == 'en'){
i18n.currentLocal='fr';
$("#frBtn").css("pointer-events","auto");
this.render(options.parent);
}
},
swichToEnglish:function(){
console.log("switch to English");
if(i18n.currentLocal == 'fr'){
i18n.currentLocal='en';
$("#enBtn").css("pointer-events","auto");
$("#frBtn").css("pointer-events","none");
this.render(options.parent);
}
}
});
return header;
});
头视图被称为路由器：
The header view is called in the router :
self._header = new Header({parent: $(".main_container")});
任何想法如何解决这个问题。我需要知道山楂树之火这些事件谢谢。
Any ideas how to fix this issue. I need to know haw to fire these events Thank You.
推荐答案
您事件处理系统未启用的原因是因为该事件处理程序委托给意见元素，但要追加模板其他一些元素。由于目标元素在这个模板，没有附加视图的报，事件将不会冒泡到委托给它的处理程序。
The reason your event handlers is not firing is because the event handlers are delegated to the views element, but you're appending the template to some other element. Since the target elements are in this template which is not appended the view's el, the events will never bubble into the handlers delegated to it.
除此之外，作为@mu太短指出的那样，当你做 $（父）.append（this.template）; ， this.template 是模板函数。你应该用实际数据调用它来获得模板。
你不应该使用全局像选择 $（''）将，并使用这一点。$ el.find（''）作为，而不是最好的做法。
Apart from that, as @mu is too short pointed out, when you do $(parent).append(this.template);,
this.template is the template function. You should actually call it with the data to get the template.
and you shouldn't be using global selectors like $('') and use this.$el.find('') instead as best practice.
此外，选项只是初始化方法中使用，并且是未定义之外。
also, options is only available inside the initialize method, and is undefined outside.
不是传递父到视图，然后有它自身附加到家长，做到这一点的看法之外，进行独立的视图。
Instead of passing the parent into the view and then have it append itself to parent, do that outside the view and make the view independent.
另外声明 模板 物业视图，而不是创造一个最佳实践后添加。
Also declare the template property in the view rather than adding it after the creation as a best practice.
和没有必要将事件处理程序的情况下手动绑定到视图，默认的事件处理程序的背景下将是视图。
And there's no need to bind the context of event handlers to the view manually, by default the context of event handler will be the view.
您认为应该是这样的：
define([ "jquery", "backbone", "text!../../pages/header.html" ], function($,
Backbone, headerTpl) {
var header = Backbone.View.extend({
initialize : function(options) {
this.render();
},
template: _.template(headerTpl),
events : {
"click #enBtn":"swichToEnglish",
"click #frBtn":"swichToFrench"
},
render : function() {
this.$el.append(this.template(/* pass the data here*/));
//--------^----- this is required for the events to work
return this;
},
swichToFrench:function(){
if(i18n.currentLocal == 'en'){
i18n.currentLocal='fr';
this.$el.find("#frBtn").css("pointer-events","auto");
this.render();
}
},
swichToEnglish:function(){
if(i18n.currentLocal == 'fr'){
i18n.currentLocal='en';
this.$el.find("#enBtn").css("pointer-events","auto");
this.$el.find("#frBtn").css("pointer-events","none");
this.render();
}
}
});
return header;
});
您可以创建这样的：
Which you can create like:
self._header = new Header();
$(".main_container").append(self._header.el);
它看起来像你只是想加入。main_container视图内容，并且不需要另外的元素。在这种情况下，你可以让你的看法报指向它，而不是把它当作报创建一个新的元素选项如下：
it looks like you just want the view content to be added to '.main_container', and doesn't need another element. In that case you can make your views el point to it rather than creating a new element by passing it as el in the options like:
self._header = new Header({
el: '.main_container' // this.el will refer to `.main_container` in view
});
那么你不必做 $（main_container）追加（self._header.el）;
如果你必须通过父眼帘的是由于某种原因的选项，那么你应该缓存它里面视图初始化，这样你可以参考它在其他地方一样。
if you must pass the parent into view as an options for some reason, then you should cache it in the view inside initialize so that you can refer it elsewhere like.
this.parent = options.parent
的侧面说明：的
正如你所看到的，我改变了你宣布视图的属性的顺序 - 初始化在上面其次是模板，事件和渲染
As you can see, I've changed the order in which you had declared the view's properties - initialize on top followed by template, event and render.
我们初始化视图，我们创建模板功能，我们申报委托的事件，然后我们渲染视图。
We initialize the view, we create the templating function, we declare the events to be delegated, and then we render the view.
在其中定义属性的顺序并不重要内部，但是当其他开发人员看你的code，它更容易消化。但它是一个见仁见智。
The order in which you define properties doesn't matter internally, but when another developer looks at your code, it's much easier to digest. But it's a matter of opinion.
这篇关于骨干click事件模板视图不点火的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
