我正在尝试使用 Backbone 做一个非常简单的 hello world。阅读文档和示例后，我认为这应该可行，但在我单击时不执行任何操作:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script type="text/javascript">
var AppView = Backbone.View.extend({
events: {
'click #new': 'createNew'
},
//CREATE
createNew: function(){
alert('yea');
}
});
var app_view = new AppView();
</script>
</head>
<body>
<a href="#new" id="new">new</a>
</body>
</html>
我错过了什么吗？有什么问题吗？
最佳答案
这里有两个问题:
- 主干 View 与特定的 DOM 元素相关联。您必须先将 View 附加到 DOM，然后它才能响应事件。
- 当您的脚本执行时，DOM 可能尚未就绪，您必须使用
$(document).ready包装 View 创建代码。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script type="text/javascript">
var AppView = Backbone.View.extend({
events: {
// the element IS the link, you don't have to specify its id there
'click': 'createNew'
},
//CREATE
createNew: function(){
alert('yea');
}
});
$(document).ready(function() {
// attach the view to the existing a element
var app_view = new AppView({
el: '#new'
});
});
</script>
</head>
<body>
<a href="#new" id="new">new</a>
</body>
</html>
关于javascript - 主干 View 点击 Hello World ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8354239/