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);
我刚开始玩这个，不知道我错过了什么......
事件似乎永远不会被调用。
感谢您的宝贵时间。
最佳答案
这段代码有很多问题。
1:事件的范围
events: { ... } 配置使用您指定的 el 来绑定(bind)事件。所以，如果你有这样的 html:
<div id="foo">
<button id="bar">click me!</button>
</div>
并且您的 View 设置如下:
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 做类似的事情，将 View 的 events 范围限定到 el。
2: jquery 选择器在加载 DOM 之前执行
您还可能遇到 DOM 未加载且不可用的问题。如果您的 View 是在 DOM 完成加载之前定义的，则对 el: $("body") 的 jQuery 调用将找不到任何内容。
要解决此问题，您可以将 jquery 调用放在 View 初始化程序中:
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);
})
希望对您有所帮助。
关于javascript - 无法让 backbone.js 正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7487826/