骨干视图+活动
[英]Backbone View + Events
问题描述
Why is the event not triggered if I click the button or trigger the event? 
如果单击按钮或触发事件，为什么不触发事件？ What do i miss? 我想念什么？
<html>
<head><script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="underscore.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
<script type="text/javascript">
var SearchView = Backbone.View.extend({
events: {
"click #testid": 'savenow'
},
initialize: function(){
console.log("init");
console.log($('testid'));
},
savenow: function(){
console.log("test save method");
}
});
// The initialize function is always called when instantiating a Backbone View.
// Consider it the constructor of the class.
var search_view = new SearchView({ el: $('#testid') });
search_view.trigger("savenow", "test");
</script></head>
<body>
<h1>test</h1>
<input id="testid" type="button" value="testbutton" />
</body></html>
The example above is almost copied, but in my case it is not working. 上面的示例几乎被复制了，但在我的情况下却无法正常工作。
3 个解决方案
解决方案1
2 已采纳 2013-11-05 18:24:25
Your having a few issues. 您遇到了一些问题。 As the others answers suggest, the events object needs to be changed. 正如其他答案所暗示的那样，需要更改events对象。 This will bind the click event to #testid by default since that is the el of the view. 默认情况下，这会将click事件绑定到#testid ，因为那是视图的el 。 Some reading on the subject delegateEvents . 一些阅读关于这个问题的delegateEvents 。
events: {
'click' : 'savenow'
}
Your second problem is - the code is loading before the DOM is loaded. 您的第二个问题是-在加载DOM之前先加载代码。 Which means, your view is unable to bind to the testid element. 这意味着您的视图无法绑定到testid元素。 To fix this, you need to wrap your code in a document.ready() function. 要解决此问题，您需要将代码包装在document.ready（）函数中。
<script type="text/template">
$(function() {
/* All your code
...
...
*/
});
A third issue is when you call search_view.trigger("savenow", "test"); 第三个问题是当您调用search_view.trigger("savenow", "test"); the savenow event is triggered, but nothing is listening for that event - so nothing appears to happen. savenow事件已触发，但是没有人在监听该事件-因此似乎什么也没有发生。 You need to listen for that event on the view: 您需要在视图上监听该事件：
initialize: function(){
console.log("init");
this.on('savenow',this.savenow,this);
// or this.listenTo(this,'savenow',this.savenow);
}
A working code example: 工作代码示例：
<html>
<head>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="underscore.js" type="text/javascript"></script>
<script src="backbone.js" type="text/javascript"></script>
<script type="text/javascript">
// Run this block of code when the DOM is loaded.
$(function() {
var SearchView = Backbone.View.extend({
// Listen for click events on this view's element - '#testid'.
events: {
"click": 'savenow'
},
initialize: function(){
console.log("init");
// listen for the savenow event triggered by this view.
this.listenTo(this,'savenow',this.savenow);
},
savenow: function(){
console.log("test save method");
}
});
var search_view = new SearchView({ el: '#testid' });
search_view.trigger("savenow", "test");
});
</script>
</head>
<body>
<h1>test</h1>
<input id="testid" type="button" value="testbutton" />
</body>
</html>
解决方案2
1 2013-11-05 16:03:55
You're giving the el as #testid - Then, you're telling it to look inside #testid for #testid when you configure events: as 您给el作为#testid-然后，您告诉它在配置事件时在#testid中查找#testid：
events:{
"click #testid":"savenow"
}
By changing the events object to 通过将事件对象更改为
events:{
"click":"savenow"
}
You are just targeting all of the view's el (in this case, #testid). 您只针对视图的所有el（在本例中为#testid）。
Alternatively, you can keep your events configuration as you had it, and change the el to be body, or parent div of your search panel (which I assume contains the text input field or other settings, as well as the button). 或者，您可以保持事件配置不变，将el更改为body或搜索面板的父div（我假设它包含文本输入字段或其他设置以及按钮）。
解决方案3
0 2013-11-05 15:57:14
events: {
"click": 'savenow'
},
Here you go! 干得好！ Event type without a selector adds the event listener on the view el itself. 没有选择器的事件类型将事件侦听器添加到视图el本身。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.