A Backbone plugin that adds declarative model and collection event binding to Backbone Views.
git submodule update --init --recursive
open test/index.html
When extending a view just specify your declarative modelEvents
and collectionEvents
.
Example:
var Section = Backbone.View.extend({
collectionEvents: {
'add': 'addNewExercise'
, 'remove': 'removeExercise'
}
modelEvents: {
'change:programming_language': 'onProgLangChange'
}
...
});
The events will automatically be cleaned up when the view's remove
or
stopListening
methods are called.
The following is part of the TodoView class definition from the famous Todos Example.
var TodoView = Backbone.View.extend({
template: _.template($('#item-template').html()),
events: {
"click .toggle" : "toggleDone",
"dblclick .view" : "edit",
"click a.destroy" : "clear",
"keypress .edit" : "updateOnEnter",
"blur .edit" : "close"
},
initialize: function() {
this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'destroy', this.remove);
},
...
Using Backbone.declarative it becomes:
var TodoView = Backbone.View.extend({
template: _.template($('#item-template').html()),
events: {
"click .toggle" : "toggleDone",
"dblclick .view" : "edit",
"click a.destroy" : "clear",
"keypress .edit" : "updateOnEnter",
"blur .edit" : "close"
},
modelEvents: {
'change': 'render'
, 'destroy': 'remove'
}
...
Takes an event hash modelEvents
with keys being the model event names to bind on and values being
functions or strings representing method names. (Also used internally for the declarative format).
Removes all event handlers attached by the bindModelEvents
.
Same as bindModelEvents
but for collections.
Same as bindModelEvents
but for collections.
MIT License.
Copyright (c) 2012 Amjad Masad [email protected] Ryzac, Inc.
Contributors: philfreo