延长Backbone.Collection原型 [英] extending Backbone.Collection prototype

问题描述

从<一个继href=\"http://stackoverflow.com/questions/10219182/retrieve-element-from-backbone-collection-removen\">this问题，我想有一些自定义的方法来增加Backbone.Collection。但是，我越来越控制台和源之间存在一些不一致的行为。

Following on from this question, I'm trying to augment Backbone.Collection with some custom methods. However, I'm getting some inconsistent behaviour between the console and the source.

下面是如何测试寻找

HTML

... 
<script type="text/javascript" src="./libs/underscore.js"></script>
<script type="text/javascript" src="./libs/backbone.js"></script>
<script type="text/javascript" src="./libs/backbone-extend.js"></script>    
<script type="text/javascript" src="./qunit/qunit.js"></script>
<script type="text/javascript" src="./backbone-extend-tests.js"></script>
</body></html>

骨干-extend.js

Backbone.Collection.prototype.extract = function() {
    // placeholder to test binding
    return 'foo';
};

骨干网扩展-tests.js

test('extending backbone', function () {
    ok(typeof Backbone.Collection.extract == 'function');
    console.log(Backbone.Collection.extract); // undefined
});

有我丢失的东西？我检查了所有的源加载

Is there something I'm missing? I've checked that all the source is loading

JFTR - 这...

JFTR - this...

_.extend(Backbone.Collection, {extract:function(){return'foo';});

...作品，只是没有采用原型增广方法。我只是不能确定为什么一种方法可行，其他没有，因为该文档为骨干建议原型的扩大（尽管它特别提到型号）。我想我需要采取的发动机罩下的更多详细信息...

...works, just not using the prototype augmenting method. I'm just unsure why one method works and the other doesn't, given that the docs for Backbone recommend prototype augmentation (although it specifically mentions Models). Guess I need to take a more detailed look under the bonnet...

更新：
 为后人，在骨干网extend.js文件放上...

UPDATE: for posterity, placing this in the backbone-extend.js file...

 _.extend(Backbone.Collection.prototype, {
     extract : function (model) {
     var _model = model;
     this.remove(model);
     return _model;
 }
 });

...作品

推荐答案

您在混合了几个关键概念这就是为什么你没有看到您所期望的行为，这更是一个根本性的JavaScript问题，并不完全相关骨干。

You are mixing up a few key concepts which is why you aren't seeing the behavior that you expect, which is more a fundamental javascript question and not entirely related to backbone.

考虑下面的构造：

var Klass = function() {};

您可以使用新关键字获得从构造一个实例调用这个constuctor。

You can invoke that constuctor using the new keyword to get an instance from that constructor.

var klassInstance = new Klass();

现在，可以说，我想补充一点，就是提供给的所有的，从这个构造derivied实例的方法。为此，我可以使用原型对象。

Now, lets say I wanted to add a method that was available to all of the instances that are derivied from that constructor. For that I can use the prototype object.

Klass.prototype.instanceMethod = function() { alert('hi'); };

然后，我应该能够使用调用该方法如下：

Then I should be able to invoke that method using the following:

klassInstance.instanceMethod();

不过，我还可以添加一个的静态的功能 - 我在这方面松散的使用期限 - 到构造本身，它可以不必一个实例来调用

However, I can also add a static function – and I use the term loosely in this context – to the constructor itself, which can be invoked without having an instance.

Klass.staticMethod = function() { alert('yo!'); };

这方法将可直接关闭的构造，但会的不的可用 - 直接 - 关闭实例

This method will be available directly off the constructor, but will not be available – directly – off of instances.

例如：

klassInstance.staticMethod == undefined

那么，什么是真的错了你的测试是要添加到原型的方法 - 这将提供给阶级的所有实例的方法 - 但在您的测试，你可以直接在类本身的测试方法。这是不一样的东西。

So what's really wrong with your test is that you are adding a method to the prototype – a method that will be available to all instances of that "class" – but in your test you are testing for a method directly on the "class" itself. Which is not the same thing.

顺便说一句，虽然相关，Backbone.js的提供了一个内置的技工创建内建类型thier的子类。这是的静态的 .extend（）方法。这为您提供了一个简单的方法来自己的功能添加到基地骨干类。

An aside, though relevant, Backbone.js provides a built in mechanic to create "sub-classes" of thier built in types. This is the static .extend() method. This provides you a simple way to add your own functionality to the base Backbone classes.

在你的情况，你会想要做的是这样的：

In your case you would want to do something like:

var MyCollection = Backbone.Collection.extend({
    extract: function() {
        // do whatever
    }
}) 

然后，你可以这样创建新的类的实例，这将对他们的 .extract（）方法：

var coll = new MyCollection();
coll.extract();

---

TL; DR;

最后 - 回你原来的问题 - 如果你想这将可以在特定类的所有实例的方法，那么你的测试的不正确。你要么需要新建立一个实例来测试反对：

---

TL;DR;

Ultimately – back to your original question – if you want a method that will be available on all instances of a particular class, then your test is incorrect. You either need to new up an instance to test against:

test('extending backbone', function () {
    var col = new Backbone.Collection();
    ok(typeof col.extract == 'function');
});

或检查原型直接的方法 - 这是一个事实，即原型对象是subtlely不同不是的只有的一个对象来获取的方法。

Or check the prototype directly for a method – this is subtlely different in the fact that the prototype object is not the only for an object to get a method.

test('extending backbone', function () {
    ok(typeof Backbone.Collection.prototype.extract == 'function');
});

这篇关于延长Backbone.Collection原型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！