Basic Backbone Collection

a Backbone view and collection

by Oakley Hall

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="text/template" id="artist-list-template">
    <table> <thead> <tr> <th> Name </th>
        <th>Hometown</th > <th> Favorite Color </th>
    </tr> </thead>
        <tbody>
        <% _.each(events, function(event) { %>
        <tr>
            <td><%= event.get('ID') %></td>
            <td><%= event.get('EventID') %></td>
            <td><%= event.get('CircuitID') %></td>
            <td><%= event.get('StartTime') %></td>
            <td><%= event.get('EventFormatID') %></td>
            <td><%= event.get('RemainingPlaces') %></td>        
         </tr>
         <% }); %>
        </tbody> </table>
</script>

CSS

#rootEl {
    height:50px;
    width:50px;
    background-color:red;
}
table a:link {
    color: #666;
    font-weight: bold;
    text-decoration:none;
}
table a:visited {
    color: #999999;
    font-weight:bold;
    text-decoration:none;
}
table a:active, table a:hover {
    color: #bd5a35;
    text-decoration:underline;
}
table {
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    font-size:12px;
    text-shadow: 1px 1px 0px #fff;
    background:#eaebec;
    margin:20px;
    border:#ccc 1px solid;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow: 0 1px 2px #d1d1d1;
    -webkit-box-shadow: 0 1px 2px #d1d1d1;
    box-shadow: 0 1px 2px #d1d1d1;
}
table th {
    padding:21px 25px 22px 25px;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e0e0e0;
    background: #ededed;
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
    background: -moz-linear-gradient(top, #ededed, #ebebeb);
}
table th:first-child {
    text-align: left;
    padding-left:20px;
}
table tr:first-child th:first-child {
    -moz-border-radius-topleft:3px;
    -webkit-border-top-left-radius:3px;
    border-top-left-radius:3px;
}
table tr:first-child th:last-child {
    -moz-border-radius-topright:3px;
    -webkit-border-top-right-radius:3px;
    border-top-right-radius:3px;
}
table tr {
    text-align: center;
    padding-left:20px;
}
table td:first-child {
    text-align: left;
    padding-left:20px;
    border-left: 0;
}
table td {
    padding:18px;
    border-top: 1px solid #ffffff;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #fafafa;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
    background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
table tr.even td {
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
   ...

JavaScript

var CalEvent = Backbone.Model.extend({
    idAttribute: 'ID',
    defaults: {
        ID: '',
        EventID: '',
        CircuitID: '',
        StartTime: '',
        EventFormatID: '',
        TotalPlaces: '',
        BookedPlaces: '',
        ProvisionalPlaces: ''
    },
    url: '/tracker/booking'
});

var events = [{
    ID: 18,
    EventID: 155957,
    CircuitID: 53,
    StartTime: "2014-11-04 17:15:00",
    EventFormatID: 224,
    RemainingPlaces: 18
}, {
    ID: 56,
    EventID: 123443,
    CircuitID: 23,
    StartTime: "2014-11-04 17:15:00",
    EventFormatID: 224,
    RemainingPlaces: 18
}, {
    ID: 34,
    EventID: 653464,
    CircuitID: 43,
    StartTime: "2014-11-04 17:15:00",
    EventFormatID: 224,
    RemainingPlaces: 18
}];

var CalEvents = Backbone.Collection.extend({
    model: CalEvent
});

var CalView = Backbone.View.extend({
    el: 'body',
    events: {
        'click td': 'clickHandler'
    },
    initialize: function () {
        this.render();
    },
    clickHandler: function (evt) {
        alert('Clicked ' + evt.currentTarget.textContent);
    },
    render: function () {
        var that = this;
        var template = _.template($('#artist-list-template').html());
        var compiled = template({
            events: that.collection.models
        });
        this.$el.append(compiled);
    }
});
var calView = new CalView({
    collection: new CalEvents(events)
});