HTML：
<!DOCTYPE html>
<html>
<head>
<script src='../client_side_javascript/jquery.min.js' type='text/javascript'></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script src='../client_side_javascript/bbmain.js' type='text/javascript'></script>
</head>
<body>
<div class='container'>
<header>
<div class='logo'><h1>logo</h1></div>
</header>
<section class='search'>
<div>
<form class='main_search_form'>
<input class='main_search_bar' type='text' placeholder='Type claim here'>
<div class='main_submit'>
<input class='main_submit_button' type='submit' value='Prove'>
</div>
</form>
</div>
</section>
<section class='arguments'>
</section>
<footer>
</footer>
</div>
</body>
</html>
JAVASCRIPT：
(function ($) {
console.log("backbone");
AppView = Backbone.View.extend({
el: $('body'),
events: {
"click input.main_submit_button": "addClaim",
},
addClaim: function (event) {
console.log("main submit button pressed");
event.preventDefault();
var claim = $('input.main_search_bar').val();
console.log('claim: ' + claim);
if ( claim != ""){
$('section.arguments').append('<div class="claim">- ' + claim + ' <input type="button" class="because_button" value="because"></div>');
}
}
});
App = new AppView;
})(jQuery);
我刚开始玩这个，无法弄清楚我错过了什么......
事件似乎永远不会被召唤。
感谢您的时间。
答案 0 :(得分：3)
您对此代码存在一系列问题。
events events: { ... }配置使用您指定的el来绑定事件。所以，如果你有html看起来像这样：
<div id="foo">
<button id="bar">click me!</button>
</div>
你有一个这样的视图设置：
MyView = Backbone.View.extend({
el: "#foo",
events: {
"click #bar": "buttonClicked"
}
});
这会将#bar的点击事件范围限定为#foo的el。就像你用jquery直接做到这一点：
var el = $("#foo");
var button = $("#bar", el);
button.click(function(e){ ... });
请注意，在此示例中选择#bar时，我将其范围限定为el变量。 Backbone执行类似操作，将视图的events范围限定为el。
你也可能遇到DOM没有加载和可用的问题。如果在DOM加载完成之前定义了视图，则对el: $("body")的jQuery调用将无法找到任何内容。
要解决此问题，您可以将jquery调用放在视图初始化程序中：
initialize: function(){
this.el = $("body");
// ... other stuff here
}
还有其他方法可以解决这个问题。因为您已经在使用模块，所以将该模块分配给命名变量，然后在jquery方法中初始化模块，而不是立即：
MyApp = (function ($) {
console.log("backbone");
AppView = Backbone.View.extend({
el: $('body'),
events: {
"click input.main_submit_button": "addClaim",
},
addClaim: function (event) {
console.log("main submit button pressed");
event.preventDefault();
var claim = $('input.main_search_bar').val();
console.log('claim: ' + claim);
if ( claim != ""){
$('section.arguments').append('- ' + claim + ' ');
}
}
});
App = new AppView;
});
$(function(){
MyApp(jQuery);
})
希望有所帮助。