BackboneJS onChange Event Example

BackboneJS onChange Event Example

by Nirvanachain

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script id="list-template" type="template">
    <% _.each(data.dimensions, function(element, index) { %>
        <select id="<%- element.id%>">
            <% _.each(element.items, function(ele, i) { %>
                <option data-nID="<%- ele.nID %>">
                    <%- ele.name %>
                </option>
            <% }); %>
        </select>
    <% }); %>
</script>

<div class="js-container"> </div>

JavaScript

var TheModel = Backbone.Model.extend({
    defaults: {
        dimensions: [{
            id: 'One',
            items: [{
                "name": "One",
                "nID": 1           
            },
            {
                "name": "Two",
                "nID": 2           
            },
            {
                "name": "Three",
                "nID": 3           
            }],
            title: '1 through 3'
        },
        {
            id: 'Two',
            items: [{
                "name": "Four",
                "nID": 4           
            },
            {
                "name": "Five",
                "nID": 5           
            },
            {
                "name": "Six",
                "nID": 6           
            }],
            title: '4 through 6'
        },
        {
            id: 'Three',
            items: [{
                "name": "Seven",
                "nID": 7           
            },
            {
                "name": "Eight",
                "nID": 8           
            },
            {
                "name": "Nine",
                "nID": 9           
            }],
            title: '7 through 9'
        }]
    }
});



var myModel = new TheModel();

var TheView = Backbone.View.extend({
    el: '.js-container',
    
    template: _.template($('#list-template').html()),

    events: {
        'change select': 'setSelectedItem'
    },
    
    initialize: function () {
        this.render();
        
    },

    render: function() {
        console.log('this.model.toJSON() =', this.model.toJSON());
        this.$el.html( this.template( { data: this.model.toJSON() } ) ); 
        
        return this;
    },
    
    setSelectedItem: function (event) {
        console.log('Fire!!!');
        console.log(event.target);
        
        var selectedItem = $(event.target);
        console.log(selectedItem);
        $('.js-container select').removeClass('selected');
       ...