Simple interface for mixins with Backbone
npm install backbone.include
|1||downloads in the last week|
|2||downloads in the last month|
|Version||0.1.1 last updated a year ago|
Extremely simple mixin interface for Backbone borrowed from SpineJS. Many Backbone extensions require you to extend their model or view. It shouldn't be this way. We shouldn't be extending the prototype chain and we shouldn't have to do any manual work for something so common.
This extension adds a simple
include class method to Model, Collection and View.
In your web page:
Now you can mixin objects easily.
class Task extends Backbone.Model @include Validation class TaskView extends Backbone.View @include EditableView @include CompositeView @include DraggableView
or in JS
var Task = Backbone.Model.extend(); Task.include(Validation); var TaskView = Backbone.View.extend(); TaskView.include(EditableView); TaskView.include(CompositeView); TaskView.include(DraggableView);
Now we can break apart our code and easily re-use it across projects. We can mix and match the parts we need exactly where we need them.
But extending the prototype isn't the only thing it does. It also fires of an
included method on the mixin
whenever it is included into an object and it is called in the context of the object it is being included into.
DraggableView = included: -> @::initialize = (options) -> dragging = false drag: -> drop: -> class TaskView extends Backbone.View @include DraggableView view = new TaskView view.dragging # false
It's a simple pattern but it's one that has let me break a lot of functionality out into reusable mixins extremely easily.
- Look at using constructor functions instead of raw objects. On include extend the prototypes and call the constructor after the constructor of the mixee.
- Add quicker ways of extending the
disposemethods since they're used so frequently
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.
Also, please don't edit files in the "dist" subdirectory as they are generated via grunt. You'll find source code in the "src" subdirectory!
0.1.0 - First Release
Copyright (c) 2012 Anthony Short
Licensed under the MIT license.