Sort of data grid with Backbone + Marionette (with a rails backend)

main.js

// JST and HAML Assets is used for the templating pre-compilation
Backbone.Marionette.Renderer.render = function(template, data) {
  if (!JST[template]) {
    throw "Template '" + template + "' not found!";
  }
  return JST[template](data);
};

window.MyApp = new Backbone.Marionette.Application();

MyApp.addRegions({
  content: ".content-box"
});

MyApp.Datagrid = (function() {
  var Datagrid, ItemPerPageView, Layout, PagerView, QuickSearchView, Theme, ThemeView, Themes, ThemesView;

  Datagrid = {};

  Layout = Backbone.Marionette.Layout.extend({
    template: "layouts/grid",
    regions: {
      grid: "#grid",
      quickSearch: "#quickSearch",
      itemPerPage: "#itemPerPage",
      pager: ".pager"
    }
  });

  Theme = Backbone.Model.extend();

  Themes = Backbone.ExtendedCollection.paginatedCollection.extend({
    url: "/themes",
    model: Theme,

    initialize: function() {
      var _this = this;

      MyApp.vent.on("quickSearch:term", function(term) {
        _this.quickSearch(term);
      });

      MyApp.vent.on("itemPerPage:count", function(count) {
        _this.perPage(count);
      });

      MyApp.vent.on("pager:previous", function() {
        _this.previous();
      });

      MyApp.vent.on("pager:next", function() {
        _this.next();
      });

      MyApp.vent.on("pager:first", function() {
        _this.first();
      });

      MyApp.vent.on("pager:last", function() {
        _this.last();
      });
    }
  });

  ThemeView = Backbone.Marionette.ItemView.extend({
    tagName: "tr",
    template: "theme",
    model: Theme,

    events: {
      "click span": "edit",
      "blur input": "save"
    },

    edit: function(event) {
      var id, span;
      id = this.model.get("id");
      span = $("span", this.el).hide();
      $("input", this.el).show().focus().val(span.text());
    },

    save: function(event) {
      var id, input, span;
      id = this.model.get("id");
      span = $("span", this.el).show();
      input = $("input", this.el).hide();
      if (this.model.get("name") !== input.val()) {
        this.model.set("name", input.val());
        this.model.save();
      }
      span.text(this.model.get("name"));
    }
  });

  ThemesView = Backbone.Marionette.CompositeView.extend({
    template: "index",
    model: Theme,
    itemView: ThemeView,
    collection: Themes,
    itemViewContainer: "#themes",
    
    serializeData: function() {
      return this.data;
    }
  });

  QuickSearchView = Backbone.Marionette.View.extend({
    el: "#quickSearch",

    events: {
      "keyup input": "search"
    },

    search: function(event) {
      var searchTerm;
      searchTerm = this.$("input").val().trim();
      MyApp.vent.trigger("quickSearch:term", searchTerm);
    }
  });

  ItemPerPageView = Backbone.Marionette.View.extend({
    el: "#itemPerPage",

    events: {
      "change select": "count"
    },

    count: function(event) {
      var count;
      count = this.$("select").val();
      MyApp.vent.trigger("itemPerPage:count", count);
    }
  });

  PagerView = Backbone.Marionette.View.extend({
    el: ".pager",

    events: {
      "click #next": "next",
      "click #previous": "previous",
      "click #first": "first",
      "click #last": "last"
    },

    first: function(event) {
      MyApp.vent.trigger("pager:first");
    },

    last: function(event) {
      MyApp.vent.trigger("pager:last");
    },

    next: function(event) {
      MyApp.vent.trigger("pager:next");
    },

    previous: function(event) {
      MyApp.vent.trigger("pager:previous");
    }
  });

  Datagrid.initializeLayout = function() {
    var collection;
    
    Datagrid.layout = new Layout();

    Datagrid.layout.on("show", function() {
      MyApp.vent.trigger("layout:rendered");
    });

    MyApp.content.show(Datagrid.layout);

    collection = new Themes();
    collection.fetch();

    collection.on("reset", function() {
      return Datagrid.layout.grid.show(new ThemesView({
        collection: collection
      }));
    });
  };

  MyApp.vent.on("layout:rendered", function() {
    var itemPerPageView, pagerView, quickSearchView;
    
    quickSearchView = new QuickSearchView();
    Datagrid.layout.quickSearch.attachView(quickSearchView);

    itemPerPageView = new ItemPerPageView();
    Datagrid.layout.itemPerPage.attachView(itemPerPageView);

    pagerView = new PagerView();
    Datagrid.layout.pager.attachView(pagerView);
  });

  return Datagrid;
})();

MyApp.addInitializer(function() {
  MyApp.Datagrid.initializeLayout();
});

$(document).ready(function() {
  return MyApp.start();
});