https://github.com/codecademy/backbone.declarative
A Backbone plugin that adds declarative model and collection event binding to Backbone Views.
https://github.com/codecademy/backbone.declarative
Last synced: 8 months ago
JSON representation
A Backbone plugin that adds declarative model and collection event binding to Backbone Views.
- Host: GitHub
- URL: https://github.com/codecademy/backbone.declarative
- Owner: Codecademy
- Created: 2012-06-14T23:09:15.000Z (almost 14 years ago)
- Default Branch: master
- Last Pushed: 2022-04-05T11:50:10.000Z (almost 4 years ago)
- Last Synced: 2025-06-27T00:54:57.901Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 14.6 KB
- Stars: 53
- Watchers: 31
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Backbone.declarative
A Backbone plugin that adds declarative model and collection event binding to Backbone Views.
## Running the tests
git submodule update --init --recursive
open test/index.html
## Usage
When extending a view just specify your declarative `modelEvents` and `collectionEvents`.
Example:
```javascript
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.
## Usage in Todos example
The following is part of the TodoView class definition from the famous [Todos Example](http://backbonejs.org/docs/todos.html).
```javascript
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:
```javascript
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'
}
...
```
## API
#### bindModelEvents
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).
### unbindModelEvents
Removes all event handlers attached by the `bindModelEvents`.
#### bindCollectionEvents
Same as `bindModelEvents` but for collections.
### unbindCollectionEvents
Same as `bindModelEvents` but for collections.
## License
MIT License.
Copyright (c) 2022 Codecademy LLC
Contributors: [philfreo](https://github.com/philfreo)