从 Backbone.js View 类访问 DOM

发布于 2024-12-24 20:12:24 字数 1043 浏览 0 评论 0原文

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

原文

I'm learning Backbone.js and got stuck on this simple example. Could you explain what's wrong with this code, that makes the alert box show up empty?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一个人的夜不怕黑 2024-12-31 20:12:24

问题是，你的视图没有绑定到 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 之外的某些内容，请查看引发事件和捕获事件。但当然，您可以自由地按照自己喜欢的方式工作。

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

jsfiddle 示例：http://jsfiddle.net/saelfaer/Lp2N2/1/

the problem is, that your your view wasn't bound to the DOM, you can specify an element when initializing your view to fix this...

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

another way of doing it is specifying the el in the View itself

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

for me views work best if you use them within their container, don't go using global selectors in jquery, always work from this.el which is the view itself. if you need to change something outside the div, take a look at raising events and catching events. But of course you are free to work the way you like.

more info on the el attribute of a view: http://documentcloud.github.com/backbone/#View-el

example on jsfiddle: http://jsfiddle.net/saelfaer/Lp2N2/1/

回复收藏 0 原文

回梦 2024-12-31 20:12:24

在视图函数中工作时，this.$ 的作用域为 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);
},

所以 this.$ 不是您在视图函数中时所知道的 $ 。这相当于手动确定 $ 的作用域，如下所示：

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

要从视图访问全局 $，只需使用 $.然而，作用域 $ 的存在是有原因的；关注点分离。您的视图代码应该仅适用于其中的元素。在视图之外访问 $elements 会重新引入意大利面条式代码，而这正是backbone 想要避免的事情。

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

要使视图目标成为特定的预先存在的元素，请在视图定义中使用选择器作为 el ，例如；

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

When working in a view function this.$ is scoped to this.el. See this code in backbone.js where the view class is defined, this is the $ instance you're actually using :

// 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);
},

So this.$ is not $ as you know it when you're in a view's function. It's the equivalent of scoping $ manually like this :

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

To access the global $ from a view just use $. However, the scoped $ is there for a reason; separation of concerns. Your view code should only be working with the elements within it. Accessing $elements outside of a view re-introduces spaghetti code, the very thing that backbone is intended to avoid

Alternatively, you may have just misunderstood the different ways that el can be initialized. By using the tagName property in your view definition (and also by not passing el into the view constructor) you're telling backbone to create a div container for your view, which is the default tagName anyway so it's not necessary.

To make a view target a specific pre-existing element, use a selector as el in your view definition eg;

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

回复收藏 0 原文

倾｀听者〃 2024-12-31 20:12:24

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

编辑： this.$ 的范围为 this.el 我看到您正在尝试访问它。除非您将 this.el 指定为类似的正文，

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

否则 this.$ 将起作用。但是，您可以简单地省略 this 并使用 $("#test_div").text()

What are you expecting? There is no text in your div, therefore it alerts empty. If you want to see text in there you'll have to add some to this.el first.

Edit: this.$ is scoped to this.el I see that you're trying to access that. Unless you specify this.el to be body like

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

Then this.$ will work. However, you can simply omit the this and use $("#test_div").text()

回复收藏 0 原文

~没有更多了~

关于作者

锦爱

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

从 Backbone.js View 类访问 DOM

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

丶视觉

蓝礼

birdxs

foonlee

微信用户

っ〆星空下的拥抱

友情链接

从 Backbone.js View 类访问 DOM

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

丶视觉

蓝礼

birdxs

foonlee

微信用户

っ〆星空下的拥抱

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。