我正在学习Backbone.js并陷入了这个简单的例子。您能解释一下这段代码有什么问题，导致警报框显示为空吗？
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<div id="test_div">test</div>
<script>
$(function() {
TestView = Backbone.View.extend({
tagName: "div",
initialize: function() {
alert(this.$("#test_div").text());
}
});
window.App = new TestView;
});
</script>
</body>
</html>
最佳答案
问题是，你的 View 没有绑定(bind)到 DOM，你可以在初始化 View 时指定一个元素来解决这个问题...
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.2.2/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js" type="text/javascript"></script>
</head>
<body>
<div id="test_div">test</div>
<script>
$(function() {
TestView = Backbone.View.extend({
tagName: "div",
initialize: function() {
alert(this.$("#test_div").text());
}
});
window.App = new TestView({el: 'body'});
});
</script>
</body>
</html>
另一种方法是在 View 本身中指定 el
TestView = Backbone.View.extend({
el: '#test_div',
tagName: "div",
initialize: function() {
alert($(this.el).find('#test_div').text());
}
});
对我来说，如果你在容器中使用 View ，它们的效果最好，不要在 jquery 中使用全局选择器，始终从 this.el ( View 本身)工作。如果您需要更改 div 之外的内容，请查看 raising events and catching events.但当然，您可以自由地按照自己喜欢的方式工作。
有关 View 的 el 属性的更多信息:http://documentcloud.github.com/backbone/#View-el
jsfiddle 上的示例:http://jsfiddle.net/saelfaer/Lp2N2/1/
关于jquery - 从 Backbone.js View 类访问 DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8730035/