CODEWITHSUNDEEP
javascriptbackbone.jsbackbone-events
Chris M
Chris M

Reputation: 4115

What is the advantage of custom events in backbone?

I understand how custom events work in Backbone and how to trigger them, but I'm having trouble understanding when exactly to use them and what purpose they serve over just calling the function directly.

e.g.

var MyView = Backbone.View.extend({
    tagName: 'div',
    className: 'myview',

    initialize: function() {
        this.model.on("mycustomevent", this.doSomething, this);
    },

    doSomething: function() { 
         console.log('you triggered a custom event');
    }

});

If I am not mistaken, The doSomething method can be called by using this.model.trigger("mycustomevent") within other methods, but can be also called directly with this.doSomething()

Outside the view, it can be called similarly with

var myview = new MyView({model:somemodel});

myview.model.trigger("customevent");

myview.doSomething();

What I am confused about is why not forgo the the custom event and just call the method directly when you need it? Any example uses would be greatly appreciated!

Upvotes: 1

Views: 414

Answers (2)

David Hellsing
David Hellsing

Reputation: 108510

You might want to add multiple handlers in different places in the code, f.ex:

this.model.on("mycustomevent", this.doSomething, this);

// ... and somewhere else you add an anonymous function
this.model.on("mycustomevent", function() {
    console.log('do something');
});

Then when you trigger the event, it will execute all handlers. You can also use off to unbind/manage individual or multiple handlers.

If you are asking about a generic explanation of the event pattern (also called observer pattern, publish/subscribe, etc...), you should probably look for a more in-depth article or book.

Upvotes: 6

dqhendricks
dqhendricks

Reputation: 19251

With backbone, the perfect example is changing a property of a model. Using a function, you would have to do something like this...

$( '#someUI' ).click( function {
   // update the model property
   myModel.someProperty = 'somethingDifferent';
   // update any ui that depends on this properties value
   $( '#uiThatDisplaysModelData' ).find( 'someSelector' ).html( 'somethingDifferent' );
   // save the model change to the server
   $.ajax( {
      url: 'somesaveurl',
      data: { someProperty: 'somethingDifferent' }
      success: callback
   } );
} );

And then repeat those steps all over your code for each property change.

With backbone and a little setup the same things can be accomplished with:

myModel.set( 'property', 'somethingDifferent' );

This is because we have attached handlers to the change and change:property events of this model. These are custom events that are created automatically for models by backbone. So whenever any part of your code manipulates the model, the DOM updates and saving can be done automatically. We can also bind input validation or whatever we want to these custom events.

It's basically just applying the observer pattern to your application, where events belong to an object that is observable, and the handlers belong to its observers.

http://en.wikipedia.org/wiki/Observer_pattern

Upvotes: 1

Related Questions