Sort of data grid with Backbone + Marionette (with a rails backend)
// 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(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment