Backbone Lead List

Just for fun...

by Steven Senkus

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/template" id="LeadViewTemplate">
    <h3><%= name %> </h3>
    <table class="table table-bordered">
        <thead>
            <tr><th>Age</th><th></th></tr>
        </thead>
        <tbody>
            <tr>
                <td><%= age %></td>
                <td><button class="btn btn-danger remove">Remove</button></td>
            </tr>
        </tbody>
    </table>
</script>
        
<script type="text/template" id="LeadsViewTemplate">
    <div class="row">
        <div class="col-md-6">
    <h2>Leads View Template</h2>
        </div>
        <div class="col-md-6">
    <button id="addLead" class="btn btn-primary">+ Add New Lead</button>
        </div>
    </div>
    <div id="leadsContainer" class="row"></div>
</script>

CSS

table {
    width: 200px!important;
    
}
#leadsContainer {
    margin: 20px;
    background-color: #000;
    color: #fff;
    
} 
#leadsContainer h3 {
    display: block;
    background-color: #dadada;
    color: #000;
    padding: 10px;
    margin-bottom:0;
}
.col-md-4 {
    max-width: 300px;
    float: left;
}

JavaScript

var Lead = Backbone.Model.extend({
    defaults: {
        name: 'default',
        age: '99'
    }
});

var Leads = Backbone.Collection.extend({
    model: Lead
});

var LeadView = Backbone.View.extend({
    tagName: 'div',
    template: _.template($('#LeadViewTemplate').html()),
    initialize: function (options) {
        this.parent = options.parent;
        console.log('new LeadView', this)
        this.render();
    },
    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
    },
    events: {
        'click button.remove': 'removeIt'
    },
    removeIt: function () {
        this.parent.collection.remove(this.model)
        this.remove();
    }

});

var LeadsView = Backbone.View.extend({
    tagName: 'div',
    template: _.template($('#LeadsViewTemplate').html()),
    initialize: function () {
        this.render()
    },
    events: {
        'click button#addLead': 'addNewLead'
    },
    addNewLead: function() {
        this.collection.add(new Lead())
        this.render();
    },
    render: function () {
        console.log(this.collection)
        this.$el.html(this.template);
        this.$el.addClass('container')
        //this.el.html(this.template())
        console.log(this, 'this')
        var that = this;
        //this.$el.html(this.template)
        this.collection.each(function (lead) {
            var leadView = new LeadView({
                model: lead,
                parent: that
            })
           // console.log(leadView.$el)
           leadView.$el.addClass('col-md-4'); that.$el.find('#leadsContainer').append(leadView.el)
        });
        
        return this;

    }

});


var lead = new Lead({
    name: 'steve',
    age: 29
});

var leads = new Leads([{
    name: 'billy',
    age: 50
}, {
    name: 'anna',
    age: 30
},
lead])

var leadsView = new LeadsView({
    collection: leads
}).$el.appendTo('body');