骨干視圖+活動
[英]Backbone View + Events
問題描述
如果單擊按鈕或觸發事件，為什么不觸發事件？ 我想念什么？
<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>
上面的示例幾乎被復制了，但在我的情況下卻無法正常工作。
3 個解決方案
解決方案1
2 已采納 2013-11-05 18:24:25
您遇到了一些問題。 正如其他答案所暗示的那樣，需要更改events對象。 默認情況下，這會將click事件綁定到#testid ，因為那是視圖的el 。 一些閱讀關於這個問題的delegateEvents 。
events: {
'click' : 'savenow'
}
您的第二個問題是-在加載DOM之前先加載代碼。 這意味着您的視圖無法綁定到testid元素。 要解決此問題，您需要將代碼包裝在document.ready（）函數中。
<script type="text/template">
$(function() {
/* All your code
...
...
*/
});
第三個問題是當您調用search_view.trigger("savenow", "test"); savenow事件已觸發，但是沒有人在監聽該事件-因此似乎什么也沒有發生。 您需要在視圖上監聽該事件：
initialize: function(){
console.log("init");
this.on('savenow',this.savenow,this);
// or this.listenTo(this,'savenow',this.savenow);
}
工作代碼示例：
<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
您給el作為#testid-然后，您告訴它在配置事件時在#testid中查找#testid：
events:{
"click #testid":"savenow"
}
通過將事件對象更改為
events:{
"click":"savenow"
}
您只針對視圖的所有el（在本例中為#testid）。
或者，您可以保持事件配置不變，將el更改為body或搜索面板的父div（我假設它包含文本輸入字段或其他設置以及按鈕）。
解決方案3
0 2013-11-05 15:57:14
events: {
"click": 'savenow'
},
干得好！ 沒有選擇器的事件類型將事件偵聽器添加到視圖el本身。
視圖主干中的重復事件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.