Basic BackboneJS List

by jcreamer898

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="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script id="item-template" type="text/x-jquery-tmpl">
    <a href="#" data-id="${id}">${name}</a>
</script>

<div id="showIt"></div>

CSS

ul {
    margin-left: 10px;
    padding-left: 10px;
    list-style-type: circle;
}

JavaScript

Item = Backbone.Model.extend({});
ItemCollection = Backbone.Collection.extend({
    model: Item
});

ItemListView = Backbone.View.extend({
    tagName: "ul",
    
    initialize: function(){
        _.bindAll(this, "renderItem");
    },
    
    renderItem: function(model){
        var itemView = new ItemView({model: model});
        itemView.render();
        $(this.el).append(itemView.el);
    },
    
    render: function(){
        this.collection.each(this.renderItem);
    }
});

ItemView = Backbone.View.extend({
    tagName: "li",
    events: {
        "click a": "clicked"
    },
    
    clicked: function(e){
        e.preventDefault();
        var name = this.model.get("name");
        alert(name);
    },

    render: function(){
        var template = $("#item-template");
        var html = template.tmpl(this.model.toJSON());
        $(this.el).append(html);
    }  
});

var items = new ItemCollection([
    {id: 1, name: "item 1"},
    {id: 2, name: "item 2"},
    {id: 3, name: "item 3"}
]);

var view = new ItemListView({collection: items});
view.render();
$("#showIt").html(view.el);