Question

我正在学习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>

Answer 1

问题是，你的视图没有绑定到DOM，你可以在初始化视图时指定一个元素来修复它......

<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>

另一种方法是在视图本身中指定el

TestView = Backbone.View.extend({
    el: '#test_div',
    tagName: "div",
    initialize: function() {
        alert($(this.el).find('#test_div').text());
    }
});

对于我来说，如果你在容器中使用它们是最好的，不要在jquery中使用全局选择器，总是使用this.el作为视图本身。如果您需要更改div之外的内容，请查看raising events and catching events.但当然您可以按照自己喜欢的方式自由工作。

有关视图的el属性的更多信息：http://documentcloud.github.com/backbone/#View-el

关于jsfiddle的例子：http://jsfiddle.net/saelfaer/Lp2N2/1/

Answer 2

在视图函数中工作时。$的作用域是this.el.在backbone.js中查看定义视图类的代码，这是您实际使用的$实例：

// jQuery delegate for element lookup, scoped to DOM elements within the
// current view. This should be prefered to global lookups where possible.
$ : function(selector) {
  return (selector == null) ? $(this.el) : $(selector, this.el);
},

所以这个。当你在视图的功能中时，$不是你所知道的。这相当于像这样手动确定$：

var test = $("div", this.el)

要从视图访问全局$，只需使用$。然而，范围内的$是有原因的;关注点分离。您的视图代码应该只使用其中的元素。在视图之外访问$元素会重新引入意大利面条代码，这是主干旨在避免的问题

或者，您可能误解了el可以初始化的不同方式。通过在视图定义中使用tagName属性（以及不将el传递给视图构造函数），您告诉主干为您的视图创建一个div容器，无论如何都是默认的tagName，因此没有必要。

要使视图定位特定的预先存在的元素，请在视图定义中使用选择器作为el;

TestView = Backbone.View.extend({
    el: "#test_div",

Answer 3

你在期待什么？你的div中没有文字，因此它会提醒空。如果您想在那里看到文字，则必须先向this.el添加一些文字。

修改：this.$的范围限定为this.el我看到您正在尝试访问该内容。除非你指定this.el为身体

TestView = Backbone.View.extend({
  el: "body",
  ...

然后this.$将有效。但是，您可以省略this并使用$("#test_div").text()

从Backbone.js View类中访问DOM

3 个答案: