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>
<script src="https://raw.github.com/NYTimes/backbone.stickit/master/backbone.stickit.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css">
<script src="http://harvesthq.github.com/chosen/chosen/chosen.jquery.js"></script>
<form id="person">
    <select class="friends chosen span12" multiple="multiple"></select>
    <span id="friends-sync" class="span12"></span>
</form>

CSS

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

JavaScript

// Setup a global handler for chosen multi-select elements
Backbone.Stickit.addHandler({
    selector: 'select.chosen',
    initialize: function($el, model, options) {
        $el.chosen();
        var up = function(m, v, opt) {
            if (!opt.bindKey) $el.trigger("liszt:updated");
        };
        this.listenTo(model, 'change:' + options.observe, 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();