Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/morficus/backbone.dataevents
Convenience attributes on your Views, to easily bind to model and collection events
https://github.com/morficus/backbone.dataevents
Last synced: about 1 month ago
JSON representation
Convenience attributes on your Views, to easily bind to model and collection events
- Host: GitHub
- URL: https://github.com/morficus/backbone.dataevents
- Owner: morficus
- License: mit
- Created: 2014-12-25T00:19:32.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2014-12-29T07:18:32.000Z (about 10 years ago)
- Last Synced: 2024-11-10T23:52:30.112Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 348 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Backbone.dataEvents
[](https://travis-ci.org/morficus/backbone.dataEvents)
[](https://codeclimate.com/github/morficus/backbone.dataEvents)
Inspired by Backbone.Marionette's [modelEvents and collectionEvents](http://marionettejs.com/docs/marionette.view.html#viewmodelevents-and-viewcollectionevents)
> Similar to the events hash, views can specify a configuration hash for collections and models.
## Benefits
* Better code organization via declarative event bindings for models and collections
* Lightweight, only 1kb (vs Marionette which is 40kb minified)
## Usage
`bower install backbone.dataevents --save`
### Getting it into your project
The Backbone.dataEvents plugin follows the [UMD pattern](https://github.com/umdjs/umd) for JavaScript modules, that means that it can be loaded in a browser via a traditional `` tag or a module loader (like [require.js](http://requirejs.org/)) or even server-side with Node.js
If you are using a module loader, just include it as any other module.
If you choose to load it via script tags, just make sure to do so after you include Backbone.
```html
<script type="text/javascript" src="underscore.js">
```
### In your code
Once it is loaded, all of your views will have access to 2 new properties (just extend from `Backbone.View` as usual): `modelEvents` and `collectionEvents`.
These properties will define the event binding between your view and the events triggered from the model or collection (custom and built-in events). As mentioned at the top of this document, these are both hashes that follow a format very similar to the regular Backbone.View `events` hash. Here is an example:
When binding to multiple model or collection events, you typically write something like this:
```javascript
var MyView = Backbone.View.extend({
events: {
'click .button.delete': 'destroy',
'click .button.add': 'openAddDialog',
'click .button.edit': 'openEditDialog'
},
initialize: function () {
this.listenTo(this.collection, 'add', this.insertNewRow);
this.listenTo(this.collection, 'add', this.updateCounter);
this.listenTo(this.collection, 'remove', this.deleteRow);
this.listenTo(this.collection, 'remove', this.updateCounter);
this.listenTo(this.collection, 'change', this.render);
},
render: function () {
...
}
});
```
This plugin allows you to write those bindings like this:
```javascript
var MyView = Backbone.View.extend({
events: {
'click .button.delete': 'destroy',
'click .button.add': 'openAddDialog',
'click .button.edit': 'openEditDialog'
},
collectionEvents: {
'add': ['insertNewRow', 'updateCounter'],
'remove': ['deleteRow', 'updateCounter'],
'change': 'render'
},
initialize: function () {
...
},
render: function () {
...
}
});
```
Pretty neat, huh?
Both the `modelEvents` and `collectionEvents` support 3 forms to callbacks:
1- named functions:
`'change': 'someFunctionName'`
2- anonymous functions:
`'change': function() { /* cool stuff here */ }`
3- an array of named functions (most useful when you want to call more than 1 function when an event is triggered):
`'change': ['someFunctionName', 'someOtherFunction`]`
## Additional reading
For more examples, take a look at the [examples directory](https://github.com/morficus/backbone.dataEvents/tree/master/examples)
If you found this plugin useful, then you may also like [Backbone.global](https://github.com/DarrylD/Backbone.global) which does the same thing but for custom global events. I suggest you check it out as well.