Backbone + Rivets + Rails

by rhodee

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:...