Backbone + Rivets + Rails
HTML
<div id="commentContainer">
<ul data-html="entry.comment"></ul>
</div>
JavaScript
ViewerApp.Views.EntriesIndex = Backbone.View.extend({
el: '#commentContainer',
initialize: function() {
this.collection.on('reset', this.render, this);
},
render: function() {
rivets.bind($(this.el), {entry: this.collection});
return this;
}
});
ViewerApp.entries = [
[{
comment: "This is comment number: 0!",
created_at: "2012-08-02T15:49:29Z",
id: 1,
updated_at: "2012-08-02T15:49:29Z"
},
{
comment: "This is comment number: 1!",
created_at: "2012-08-02T15:49:29Z",
id: 2,
updated_at: "2012-08-02T15:49:29Z"
},
{
comment: "This is comment number: 2!",
created_at: "2012-08-02T15:49:29Z",
id: 3,
updated_at: "2012-08-02T15:49:29Z"
},
{
comment: "This is comment number: 3!",
created_at: "2012-08-02T15:49:29Z",
id: 4,
updated_at: "2012-08-02T15:49:29Z"
},
{
comment: "This is comment number: 4!",
created_at: "2012-08-02T15:49:29Z",
id: 5,
updated_at: "2012-08-02T15:49:29Z"
}]
]
ViewerApp.Routers.Entries = Backbone.Router.extend({
routes: {
'': 'index'
, 'entries/:id': 'show'
},
initialize: function() {
//initialize collection with data from server
this.entry = new ViewerApp.Collections.Entries();
//provide router with DOM element
this.entry.reset($('#commentContainer').data('html'));
},
index: function() {
//initialize view
entryView = new ViewerApp.Views.EntriesIndex({collection: this.entry});
//draw content to the page
$('#container').html(entryView.render().el);
}
});
ViewerApp.Collections.Entries = Backbone.Collection.extend({
//this URL corresponds to a Rails REST endpoint
//the JSON data structure above is intended to support
// debugging
url: '/entries',
model:...