JSFiddle - React, Tailwind, and code Playground

by Arun Tummala

HTML

<script src="//documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="//documentcloud.github.io/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.3.1/select2.css">
<script src="https://rawgit.com/NYTimes/backbone.stickit/master/backbone.stickit.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<form id="person">
    <select class="friends select2 span12" multiple="multiple"></select>
    <span id="friends-sync" class="span12"></span>
    <div class="save">Save</div>
</form>

CSS

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

JavaScript

// Setup a handler for .select2 multi-select elements
Backbone.Stickit.addHandler({
    selector: 'select.select2',
    
});

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({
    events: {
        'click .save': 'saveForm'
    },
    initialize: function() {
        this.setElement($('#person'));
        this.model = person;
    },
    saveForm: function () {
        alert(this.model.attributes);
        console.log(this.model.attributes);
    },
    bindings: {
        '.friends': {
            observe: 'friends',
            initialize: function($el, model, opt) {
        var e = 'change:' + opt.observe, self = this;
        $el.select2({
                width: '100%',
                allowClear: true,
                ajax: {
                    url: '//api.myjson.com/bins/4m3jp',
                    type: 'GET',
                    dataType: 'json',
                    data: function (params) {
                        return {
                            search: params.term
                        };
                    },
                    processResults: function (data, page) {
                        return {
                            results: data
                        };
                    },
                    cache: true
                },
                escapeMarkup: function (markup) {
                    return markup;
                }, // let our custom formatter work
                minimumInputLength: 1,
                
            });
        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);
        });
    },
            selectOptions: {
                collection: function() {
                    return friendCollection;
   ...