是`bindAll`过时? [英] is `bindAll` outdated?

查看:121
本文介绍了是`bindAll`过时?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当然,我阅读说明书,但正如我在经典的例子看到它并没有真正有所作为,如果我评论该行有约束力。是方法默认情况下,现在的约束?

 (函数($){
    VAR的ListView = Backbone.View.extend({
        EL:$('#的thelist'),// EL附加到现有元素
        事件:{
            点击按钮添加#':'的addItem
        },        初始化:功能(){
            // _.bindAll(thathis,呈现,的addItem'); //使用每个功能'这个'作为当前的对象应该是在这里            this.counter = 0; //项目总数这种添加远
            this.render();
        },        渲染:功能(){
            $(this.el).append('<按钮的ID =添加>添加列表项目< /按钮>');
            $(this.el).append('< UL>< / UL>');
            //执行console.log(本);
            //执行console.log(this.el);
        },        的addItem:功能(){
            this.counter ++;
            $('UL',this.el).append('<立GT;世界你好'+ this.counter +'< /李>');
        }
    });    VAR的ListView =新的ListView();})(jQuery的);


解决方案

贾克斯是正确的,您不必手动绑定在骨干网(目前1.1.0)的最新版本的查看方法和事件。有早期版本,其中这是真的太多,但我不记得哪一个。

有,您将需要绑定您的视图的方法,使他们正常工作的情况。这些案件都是基本的JavaScript作用域并没有涉及到骨干J​​S专。

这是最好不要使用 _。bindAll 。相反,你应该根据具体情况逐案使用 _结合。结合如果您正在使用下划线JS。

其实,如果你使用的是骨干网,您将不再需要使用 _。结合无论是。有对骨干活动类的快捷方法。这意味着你可以在收藏模式类使用这些快捷键也因为他们每个人都有Events类基本上混

这是什么,你需要在您的视图类做听众附加到集合或模型。

  this.collection.on(添加,this.appendItem,这一点);

  this.model.on('变',this.render,这一点);

第三个参数绑定视图对象范围以渲染方法。没有这一点,在渲染方法会被调用的模式,我相信的范围。

在一个侧面说明,你也可以这样做:

  this.collection.bind(添加,this.appendItem,这一点);

方法实际上是一个别名绑定,但我认为这是更清晰的使用。使用绑定可能会造成混淆。貌似骨干文档preFER 关闭绑定取消绑定

下面是两个jsFiddles,说明我在说什么。我的例子是从本教程的例子修改: http://arturadib.com/hello-backbonejs/文档/ 5.html

本教程已经存在了很长一段时间实际上,这样可能不会用最好的之一。它似乎像它可能已经更新了一下,因为它使用的骨干1.10。我也注意到,它使用 _。bindAll

1版使用正确绑定: http://jsfiddle.net/ChTjs/

下面相关的方法:

 初始化:功能(){
    this.collection =新名单();
    this.collection.on(添加,this.appendItem,这一点);
    this.collection.on(添加,this.updateCount,这一点);
    this.collection.on(删除,this.updateCount,这一点);
    this.counter = 0;
    this.render();
},

在这里:

  this.model.on('变',this.render,这一点);
this.model.on(删除,this.unrender,这一点);

下面是不视图范围回调绑定的jsfiddle版本。 http://jsfiddle.net/LpEW8/1/

试试吧,慢慢的绑定添加到拿到code再次合作。我才意识到这是在骨干文档居然提及。搜索绑定这种

编辑2

就意识到,这将是更好地使用 listenTo 方法。这里的好处是,你回调将永远被绑定到视图/对象调用 listenTo 。所以没必要通过这个使用时等。它的另一个优点是,听众将被自动删除,而在使用

当情况不是这样

因此​​,而不是这样的:

  this.collection.on(添加,this.appendItem,这一点);
this.collection.on(添加,this.updateCount,这一点);
this.collection.on(删除,this.updateCount,这一点);

您在你看来做到这一点:

  this.listenTo(this.collection,添加,this.appendItem);
this.listenTo(this.collection,添加,this.updateCount);
this.listenTo(this.collection,删除,this.updateCount);

下面是主干文档锚链接 listenTo http://backbonejs.org/#Events-listenTo

另外这里是一个更新的提琴: http://jsfiddle.net/ChTjs/2/

Of course i read manual, but as i see in classical example it doesn't really make a difference if i comment the line with binding. Are the methods bound now by default?

(function($){
    var ListView = Backbone.View.extend({
        el: $('#TheList'), // el attaches to existing element
        events: {
            'click button#add': 'addItem'
        },

        initialize: function(){
            // _.bindAll(thathis, 'render', 'addItem'); // every function that uses 'this' as the current object should be in here

            this.counter = 0; // total number of items added thus far
            this.render();
        },

        render: function(){
            $(this.el).append('<button id="add">Add list item</button>');
            $(this.el).append('<ul></ul>');
            // console.log(this);
            // console.log(this.el);
        },

        addItem: function(){
            this.counter++;
            $('ul', this.el).append('<li>hello world'+this.counter+'</li>');
        }
    });

    var listView = new ListView();

})(jQuery);

解决方案

Jax is right that you don't have to manually bind your View methods and events in the latest version of Backbone (Currently 1.1.0). There are earlier versions where this is true too, but I can't remember which ones.

There are cases where you will need to bind your view methods to make them work correctly. These cases are basic Javascript scoping and not related to Backbone JS specifically.

It is best not to use _.bindAll. Instead you should bind on a case-by-case basis using _.bind if you are using Underscore JS.

Actually if you are using Backbone, you won't need to use _.bind either. There are shortcut methods on the Backbone Events class. This means you can use these shortcuts in the Collection and Model classes too since they each have the Events class mixed in essentially.

This what you will need to do in your view class to attach listeners to collections or models.

this.collection.on('add', this.appendItem, this);

or

this.model.on('change', this.render, this);

The third parameter binds the view object scope to the render method. Without this, the render method will be called with the scope of the model I believe.

On a side note you can also do this:

this.collection.bind('add', this.appendItem, this);

The on method is actually an alias to bind, but I think it is clearer to use on. Using bind can be confusing. Looks like the Backbone docs prefer on and off to bind and unbind.

Here are two jsFiddles that illustrates what I'm talking. My examples are modified from this tutorial example: http://arturadib.com/hello-backbonejs/docs/5.html

This tutorial has been around for a long time actually, so may not be the best one to use. It does seem like it may have been updated a bit since it does use Backbone 1.10. I will also note that it uses _.bindAll.

Version 1 uses binding correctly: http://jsfiddle.net/ChTjs/

Relevant methods here:

initialize: function() {
    this.collection = new List();
    this.collection.on('add', this.appendItem, this);
    this.collection.on('add', this.updateCount, this);
    this.collection.on('remove', this.updateCount, this);
    this.counter = 0;
    this.render();
},

and here:

this.model.on('change', this.render, this);
this.model.on('remove', this.unrender, this);

Here is a jsFiddle version that doesn't bind the view scope to the callbacks. http://jsfiddle.net/LpEW8/1/

Try it out and slowly add in the bindings to get the code working again. I just realized this is actually mentioned in the Backbone docs. Search Binding "this"

EDIT 2

Just realized that it would be better to use the listenTo method. The advantage here is that you the callback will always be bound to the view/object that call listenTo. So no need to pass this like when using on. The additional benefit is that the listeners will be removed automatically, whereas that is not the case when using on

So instead of this:

this.collection.on('add', this.appendItem, this);
this.collection.on('add', this.updateCount, this);
this.collection.on('remove', this.updateCount, this);

You do this in your view:

this.listenTo(this.collection, 'add', this.appendItem);
this.listenTo(this.collection, 'add', this.updateCount);
this.listenTo(this.collection, 'remove', this.updateCount);

Here is the anchor link to listenTo in Backbone docs: http://backbonejs.org/#Events-listenTo

Also here is an updated fiddle: http://jsfiddle.net/ChTjs/2/

这篇关于是`bindAll`过时?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆