CODEWITHSUNDEEP
javascriptbackbone.jsunderscore.js
Dale
Dale

Reputation: 1628

What does the underscore marking do in backbone and when do we use it?

I'm going through the process of learning backbone and don't understand all of the syntax. Below I put in some of the code I've been working through to learn backbone so I could reference it in this question. While I get most of how backbone works, I don't quite understand some of the meanings behind a few of the markings in some of the code. The source of documentation of BackBone is scarce at best. I get 90% of it however the syntax I don't get is what does the underscore '_' really provide and when to use it. For instance below there is code that uses the underscore at the ".bindAll( .... " Of course I do understand what the binding is. Just not sure of when to use the underscore and what role the marking plays. Another example is when the underscore shows itself before the '(this.collection.models).each(function(item)...' code below. I get that the code is doing a loop however why are they using underscore marking. Thanks for your help.

(function($){

  var Item = Backbone.Model.extend({
    defaults: {
      part1: 'hello',
      part2: 'world'
    }
  });    
   var List = Backbone.Collection.extend({
    model: Item
  });

  var ListView = Backbone.View.extend({
    el: $('body'),
    events: {
      'click button#add': 'addItem'
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem', 'appendItem'); // remember: every function that uses 'this' as the current object should be in here

      this.collection = new List();
      this.collection.bind('add', this.appendItem); // collection event binder

      this.counter = 0;
      //once the object is initialized, render the page.
      this.render();      
    },
    render: function(){
    var self = this;      
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
      _(this.collection.models).each(function(item){ // in case collection is not empty
    self.appendItem(item);
      }, this);
    },
    addItem: function(){
      this.counter++;
      var item = new Item();
      item.set({
    part2: item.get('part2') + this.counter // modify item defaults
      });
      this.collection.add(item); // add item to collection; view is updated via event 'add'
    },
     appendItem: function(item){
      $('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");
    }
  });

  var listView = new ListView();
})(jQuery);

Upvotes: 1

Views: 957

Answers (4)

Blaster
Blaster

Reputation: 9080

Underscore is nothing more than a collection of utility/useful functions which are efficient, cross-browser. Each function of underscore starts with an underscore character _ (hence named Underscore).

(emphasis mine)

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It's the tie to go along with jQuery's tux, and Backbone.js's suspenders.

The backbone could also have had its own set of functions but since needed utility functions are already present in Underscore, they are used instead by backbone. In other words, Backbone coupled with Underscore provides you more power and flexibility in programming/functional needs.

Notice that both Backbone and Underscore are writte by the same author.

Read more on docs:

http://underscorejs.org/

Upvotes: 2

Ian Bishop
Ian Bishop

Reputation: 5205

Underscore.js is a javascript utility library written by DocumentCloud, the creators of Backbone.js.

It is available as a distributable outside of Backbone.js, which is why it has its own namespace.

It aids developers by providing interfaces to various functional language constructs that are not necessarily supported natively by all browsers.

Underscore.js Documentation

Eg:

bindAll_.bindAll(object, [*methodNames])

Binds a number of methods on the object, specified by methodNames, to be run in the context of that object whenever they are invoked. Very handy for binding functions that are going to be used as event handlers, which would otherwise be invoked with a fairly useless this. If no methodNames are provided, all of the object's function properties will be bound to it.

Upvotes: 0

Mitya
Mitya

Reputation: 34556

Underscore is a library in and of itself, which Backbone happens to utilise in its source. Its API is entirely contained in the _ namespace, an object.

Underscore is concerned mostly with the extension of JavaScript's native API at a data level. That is, it is more interested in methods for, say, intersecting arrays, than with DOM manipulation (i.e. what jQuery specialises in).

It also has a templating system, something else Backbone utilises.

Upvotes: 0

Matt
Matt

Reputation: 10564

It's best to think of the underscore as more or less a namespace for handy utility functions. They just used underscore to keep from polluting the global namespace.

For more info than this, it's best to read the docs: underscore

In particular, the usage you seem caught up on is under chaining

Upvotes: 0

Related Questions