backbone-crux
v6.1.2
Published
Unmissable patches for Backbone.
Downloads
160
Readme
backbone-crux
An opinionated library with simple, but unmissable additions to Backbone, Backbone.Paginator, backbone.stickit and Marionette.
At Code Yellow, we’ve been relying on these additions for over two years.
$ npm install backbone-crux --save
Usage
Model
This section describes what functionality is added to the Backbone.Model
.
parse {ignore: true || ['keys', 'to', 'be', 'ignored']}
Extended parse to add a new feature: ignore. If options.ignore = true
, the parse function returns an empty object and effectively ignores the server response. This can be useful when you use patch where you simply want to set an attribute and not let the server result influence other attributes. If you supply an array, those keys will be omitted from the response before parsing.
isEmpty
isEmpty
checks whether a model is still in the original, default, state, and thuss practically empty. An example:
import { Model } from 'backbone-crux';
const Bar = Model.extend({
defaults() {
return {
id: null,
type: 'foo',
}
}
});
const bar = new Bar();
bar.isEmpty(); // true
bar.set('type', 'bar');
bar.isEmpty(); // false
toJSON
toJSON
is modified to recursively flatten everything. This means that if you nest a model in a model, and then call model.save()
, toJSON
is also called for the nested model.
toHuman
toHuman
will recursively flatten everything, like toJSON
. Marionette.View
automatically uses toHuman
and adds it to your template.
fromHuman
fromHuman
can be used in a view to parse data from a human readable format to a server readable format. By default it does the exact same as set
, but you can override it in your model.
Collection
This section describes what functionality is added to the Backbone.Collection
.
Paginator
The collection is always extended from backbone.paginator, and automatically parses API responses to fit into the collection.
The following format is expected from the API:
{
"data": [{}, {}],
"totalRecords": 2,
}
totalRecords
should contain all records that were found (so not only the records that are in data
!).
attributes
The collection has a model, called attributes
in it. This model represents the data that will be added to each request.
import { Collection } from 'backbone-crux';
const collection = new Collection(null, {
uri: 'api/example'
attributes: {
foo: 'bar',
},
});
collection.fetch();
This will result in a fetch to api/example?foo=bar
. Because the attributes are a model, it is very easy to listen to state changes and e.g. update a filter.
To add an attribute, you can do: collection.attributes.set('lorem', 'ipsum')
. All new fetches will then use api/example?foo=bar&lorem=ipsum
.
fetchData
By default, a fetch is done with data from the attributes
model. It is possible to override this, and enforce that only specific attributes are used:
import { Collection } from 'backbone-crux';
export default Collection.extend({
fetchData() {
return _.omit(this.attributes, 'foo');
},
});
xhr
A XHR request for a fetch will be stored in collection.xhr
. This allows you to e.g. easily abort a request when a view gets destroyed.
Stickit UI bindings with Marionette
Marionette has the nifty @ui
syntax to refer to html elements, but stickit
does not. With backbone-crux, the @ui
syntax is automatically enabled for stickit bindings.
Example:
export default Marionette.ItemView.extend({
ui: {
title: '._title',
},
onRender() {
this.stickit();
},
bindings: {
'@ui.title': 'title',
},
});
XHR events
For every XHR request a model or collection does, a couple of events will be fired. The name of these events has the method in it (create
, read
, update
, or delete
).
The event before:<method>
is fired just before the XHR request takes place. After the XHR request, after:<method>
will be fired. Depending on the outcome of the request, after:<method>:success
and after:<method>:error
will be fired.
An example of how you can use this:
export default Marionette.ItemView.extend({
modelEvents: {
'after:read:success': 'onAfterReadSuccess',
},
onAfterReadSuccess() {
console.log('Look ma, I’m done fetching!');
}
});
Marionette plugins
Using external plugins can be quite a pain with Marionette. The onRender
method can get very messy fast. Also, forgetting to destroy plugins can lead to small memory leaks. Marionette plugins aims to fix these problems. An example:
export default Marionette.ItemView.extend({
ui: {
input: '._input',
},
plugins: {
mask: {
bind() {
this.ui.input.mask('9999-99');
},
unbind() {
this.ui.input.unmask();
},
},
},
});
bind
is called when rendering a view. unbind
is called when a view gets destroyed.
You can also define plugins as a function:
export default Marionette.ItemView.extend({
ui: {
input: '._input',
},
plugins() {
return {
mask: {
bind() {
this.ui.input.mask('9999-99');
},
unbind() {
this.ui.input.unmask();
},
},
};
},
});
Development
To run the tests (and also lint the source files), run:
npm test
Legal
Distributed under ISC license.