JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/select2/3.3.1/select2.css">
<script src="http://cdn.strategiqcommerce.com/ajax/libs/select2/3.3.1/select2.js"></script>
<script src="https://rawgithub.com/NYTimes/backbone.stickit/master/backbone.stickit.js"></script>
<form id="person">
    <select class="friends select2 span12" multiple="multiple"></select>
    <span id="friends-sync" class="span12"></span>
</form>

CSS

.span12 {
    display: inline-block;
    width: 220px;
    padding: 4px;
    font-size: 14px;
    margin: 10px;
}

JavaScript

// Setup a handler for .select2 multi-select elements
Backbone.Stickit.addHandler({
    selector: 'select.select2',
    initialize: function($el, model, opt) {
        var e = 'change:' + opt.observe, self = this;
        $el.select2();
        var up = function(m, v, o) {
            if (!o.stickitChange) $el.trigger("change");
        };
        this.listenTo(model, e, up);
        this.listenTo(model, 'stickit:unstuck', function() {
            self.stopListening(model, e, up);
        });
    }
});

var person = new Backbone.Model({
    friends: [1, 2]
});

var friendCollection = [{id:1,name:'ted'}, {id:2,name:'brian'}, {id:3,name:'hank'}];

new (Backbone.View.extend({
    initialize: function() {
        this.setElement($('#person'));
        this.model = person;
    },
    bindings: {
        '.friends': {
            observe: 'friends',
            selectOptions: {
                collection: function() {
                    return friendCollection;
                },
                labelPath: 'name',
                valuePath: 'id'
            }
        },
        '#friends-sync': 'friends'
    },    
    render: function() {
        this.stickit();
    }
}))().render();