What is “options” in Backbone.js?

2019-02-03 12:29发布

问题:

What is "options" in Backbone.js that I see all over the official source code and also used in a tutorial blog by Thomas Davis with sample code here:

Friends = Backbone.Collection.extend({
     initialize: function (models, options) {
                   this.bind("add", options.view.addFriendLi); 
                 }
});

I don't see any other tutorials using it, and even the doc mentioning it. It does, but in a context kind of format ([options]), not in a hard-coded "options": options.view.addFriendLi

回答1:

options, conventionally, is a javascript object of key/value pairs that provide data/context/arguments/configuration to a method call. Think of it like named arguments, as opposed to ordered arguments.

For example:

var makePerson = function(name, options) {
  var person = {};
  person.name = name;
  person.age  = options.age;
  return person;
};

var me = makePerson('Alex', {age:30}); // In 3 days... scary :(

How the function being called uses this object, is up to that function.

The documentation for backbone for Collection.initialize() does not seem to list what keys on the options object are used or expected, which is unfortunate. So without looking at the source, there is no way to tell. But your example does seem to indicate a view key is expected. So you might call it like this:

var friendsCollection = new Friends(userModels, {view: someBackboneView});

This is simply a convention many libraries tend to use, and there is nothing special about it. But usually many keys in an object that is passed to a function call is better than a funciton that you call with many arguments, because each value has a label which makes it clear what each value is for.


Looking a bit further, now here: http://documentcloud.github.com/backbone/docs/backbone.html#section-53

It looks like Collection.initialize() only accepts a single key in it's options: comparator. Here you can define a function used to sort the models in the collection: http://documentcloud.github.com/backbone/#Collection-comparator

Working that into your example, you would call that like this:

var friendsCollection = new Friends(userModels, {
  view: someBackboneView,
  comparator: function(friend) {
    return friend.get('age');
  }
});


回答2:

Well, you can see the tutorial blog by Thomas Davis with sample code, the Backbone.View.extend will answer your question:

....
AppView=Backbone.View.extend({
    el:$("body"),
    initialize:function(){
        this.friends=new Friends(null, {view:this});
        //Create a friends collection when the view is initialized,
        //Pass it a reference to this view to create a connection between the two
    }
....

The key is this.friends=new Friends(null, {view:this});

From the above code initialize:function(models, options)

So you can know,the "options" == "{view:this}"

It creates a new friends and passes in a parameter ({view:this}), then it passes itself to the above function.

Combine the code options.view.addFriendLi,we can know why it can call the method .addFriendLi.