BackboneJS Click Event Example

BackboneJS Click Event Example

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">
    <ul id="items">
        <% for(i = items.length - 1; i >= 0; i--) { %>
	        <li>
                <a href="#" data-id="<%= items[i].id %>"><%= items[i].name %></a>
            </li>
        <% } %>
    </ul>
</script>

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

JavaScript

var Model = Backbone.Model.extend({
    defaults: {
        items: [
            {
                "name": "One",
                "id": 1           
            },
            {
                "name": "Two",
                "id": 2           
            },
            {
                "name": "Three",
                "id": 3           
            }
        ]
    }
});

var myModel = new Model();

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

    events: {
        "click #items li a": "setSelectedItem"
    },

    render: function() {
        alert(this.model.toJSON());
        this.$el.html( this.template( this.model.toJSON() ) );
    },

    setSelectedItem: function(event) {
        var selectedItem = $(event.currentTarget);
        alert('selectedItem =' , selectedItem)
        // Set all of the items to not have the selected class
        $('#items li a').removeClass('selected');
        selectedItem.addClass('selected');
        // Store a reference to what item was selected
        this.selectedItemId = selectedItem.data('id');
        return false;
    }
});

var myView = new View({model: myModel});
myView.render();