Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is "options" in Backbone.js?

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

like image 627
Jan Carlo Viray Avatar asked Jan 25 '12 04:01

Jan Carlo Viray


People also ask

What is backbone JS give its features?

Backbone. js allows developers to develop one page applications and front-end much easier and better using JavaScript functions. Backbone provides different types of building blocks like models, views, events, routers and collections for assembling client side web applications.

Is Backbone JS any good?

Backbone has been around for a long time, but it's still under steady and regular development. It's a good choice if you want a flexible JavaScript framework with a simple model for representing data and getting it into views.

What is the only method available in the backbone JS history?

There is only method named "start" can be used to manipulate the Backbone. js history.

Is Backbone JS frontend or backend?

Backend Synchronization BackboneJS is use with the front-end and back-end systems, allows the synchronization with the backend to provide support to RESTful APIs.


2 Answers

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');
  }
});
like image 108
Alex Wayne Avatar answered Oct 03 '22 18:10

Alex Wayne


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.

like image 40
railsbug Avatar answered Oct 01 '22 18:10

railsbug