backbone.mix

Mixins implementation for Backbone

Read my post about concept >>>

Quick start with mixing

Mixin can be a simple object

var Editable = {
    edit: function(){
        console.log('edit');
    }
};

and you can mix it into any class inherited from Backbone view, model etc.

var Article = Backbone.Model.mix(Editable).extend({
    initialize: function(){
        Backbone.Model.prototype.initialize.call(this);
        this.edit(); // logs "edit"
    }
});

Mixing more than one mixin

Of course you can mix as many mixins as you want like this:

var Article = Backbone.Model.mix(
    Editable, 
    Writable,
    WithLogger
).extend( ... );

Mixing to child class

mix is inherited as well as any other static method of Backbone classes, so you can use it with child classes

var Post = Article.mix(WithComments).extend( ... );

Mixins can depend on other mixins

It's very frequent situation when one mixin wants to use methods of other one. Suppose WithComments need to log something using log method of WithLogger. Then the declaration of WithComments becomes a bit more complex:

var WithComments = new Mixin({
    dependencies: [WithLogger]
}, {
    initComments: function() {
        this.log('init comments');
    }
});

Now mixing WithComments automatically mixes WithLogger

var Post = Article.mix(WithComments).extend( ... );
var post = new Post;
post.log('something');

Installation

To install latest version just type:

> bower install backbone.mix --save

If you do not have bower:

> npm install -g bower

Inclusion

You have two ways to include the script

Using globals

Just add script tags with Mixin and Backbone.Mix right after Backbone:

<script src="path/to/backbone.js"></script>
<script src="path/to/Mixin.js"></script>
<script src="path/to/Backbone.Mix.js"></script>

Using AMD loader, for example RequireJS

Add info about jQuery and Backbone locations to the shim

requirejs.config({
    paths: {
        backbone: 'path/to/backbone',
        jquery: 'path/to/jquery'
    },
    shim: {
        jquery: {
            exports: 'jQuery'
        }
    }
});

Add Backbone.Mix to the list of dependencies when you want to use mix method

require([
    'path/to/bakbone', 
    'path/to/Backbone.Mix'
], function (Backbone) {
    var SomeFeature = {
        doAmazingStuff: function(){}
    };
    
    var MyView = Backbone.View.mix(SomeFeature).extend({
        // your view prototype here
    });
});

Add Mixin to the dependencies when you need to create a complex mixin

define([
    'path/to/Mixin'
], function (Mixin) {
    var MyMixin = new Mixin({
        dependencies: [...]
    }, {
        // mixing properties
    }, {
        // static properties for the mixin
    });
    
    return MyMixin;
});

How it works

When you mix something you create a new temporary class which is placed between base class and child class in the prototype chain. In other words if you have class A and class B inherited from A with mixed M your prototype chain looks like this

Class A
  |
Tmp Class with M as a prototype
  |
Class B

If M depends on M2:

Class A
  |
Tmp Class with M2 as a prototype
  |
Tmp Class with M as a prototype
  |
Class B

Mix your brain?