Backbone Stickit Example

by nareshbhatia

HTML

<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/NYTimes/backbone.stickit/master/backbone.stickit.js"></script>
<form id="filter">
    <fieldset>
        <legend>Actions</legend>
        <div>
            <input type="checkbox" id="action-buy" class="action" value="Buy">
            <label for="action-buy">Buy</label>
        </div>
        <div>
            <input type="checkbox" id="action-sell" class="action" value="Sell">
            <label for="action-sell">Sell</label>
        </div>
    </fieldset>

    <fieldset>
        <legend>Order Type</legend>
        <div>
            <input type="radio" id="order-type-market" name="order-type" class="order-type" value="Market">
            <label for="order-type-market">Market</label>
        </div>
        <div>
            <input type="radio" id="order-type-limit" name="order-type" class="order-type" value="Limit">
            <label for="order-type-limit">Limit</label>
        </div>
    </fieldset>        
</form>
        
<div id="output">
    <p id="actions-value"></p>
    <p id="order-type-value"></p>
</div>

CSS

body {
    font-family: arial;
}

JavaScript

// Initialize the model
var filterModel = new Backbone.Model();
filterModel.set({
    'actions': ['Sell'],
    'orderType': 'Limit'
});

// Define views
var FilterView = Backbone.View.extend({
    bindings: {
        '.action': 'actions',
        '.order-type': 'orderType'
    },
    render: function () {
        this.stickit();
    }
});

var OutputView = Backbone.View.extend({
    initialize: function () {
        this.listenTo(this.model, 'change', this.render);
    },
    render: function () {
        var data = this.model.toJSON();
        $('#actions-value').html(JSON.stringify(data.actions));
        $('#order-type-value').html(JSON.stringify(data.orderType));
    }
});

// Instantiate and render views
var filterView = new FilterView({
    model: filterModel,
    el: '#filter'
});

var outputView = new OutputView({
    model: filterModel,
    el: '#output'
});

filterView.render();
outputView.render();