Permalink
Browse files

Added Books.View examples generated by backbonify

  • Loading branch information...
charly committed Mar 14, 2012
1 parent 97fd34f commit 50e2cddbc71f0e1eecc4ab7b15b9d22057002761
View
@@ -29,7 +29,7 @@ Is instantiated by a click on the __cell of the table__. The "editCell" function
...
})
-To quickly build an admin like interface [check Backbonify][1] which heavily uses backbone.grid to create all it's views.
+To quickly build an admin like interface use [Backbonify][1] which heavily uses backbone.grid to create all it's views. Check the examples to have a better idea of how it works.
TODO : build an example site to have a better grasp of the overall concepts.
@@ -0,0 +1,32 @@
+//
+// EDIT : Book
+//
+Fees.Views.Books = Fees.Views.Books || {};
+
+Fees.Views.Books.EditView = Grid.EditView.extend({
+ tagName : "tr",
+ className : "new_book",
+ template : JST["templates/books/show"],
+ cell : null,
+ attribute : null,
+ inputTag : null,
+
+ initialize : function() {
+ this.model.bind("sync", this.renderRow, this);
+ },
+
+
+ _createInputTemplate : function() {
+ if( this.cell.hasClass('address') ) {
+ return "<textarea style='height:25px' name='address'>{{address}}</textarea>"
+ } else {
+ return '<input id="book_' + this.attribute +
+ '" value="<%=' + this.attribute +
+ '%>" name="' + this.attribute + '" />'
+ }
+ },
+
+ noop:null
+});
+
+//_.extend(Fees.Views.Books.EditView.prototype, Fees.FormHelpers);
@@ -0,0 +1,36 @@
+//
+// FILTER : Book
+//
+Fees.Views.Books = Fees.Views.Books || {};
+
+Fees.Views.Books.FilterView = Backbone.View.extend({
+ events : {
+ "keypress input": "filter"
+ },
+
+ initialize: function() {
+ this.collection.bind("reset", this.showLength, this);
+ this.collection.bind("filter", this.showLength, this);
+ },
+
+ filter: function(event) {
+ if (event.which == 13) {
+ event.preventDefault();
+ var a = this.getAttrValue(event)
+ this.collection.filterAttr(a[0], a[1])
+ }
+ },
+
+ showLength:function() {
+ this.$(".collectionLength").text(this.collection.length)
+ },
+
+ // helper to get the attr 'film' out of name='performance[film]'
+ getAttrValue: function(event) {
+ var $target = $(event.currentTarget),
+ query = $target.val(),
+ attr = $target.prop("name").replace(/[a-z_].*\[([a-z].*)\]/, "$1")
+ return [attr, query]
+ }
+
+});
@@ -0,0 +1,15 @@
+//
+// INDEX : Book
+//
+Fees.Views.Books = Fees.Views.Books || {};
+
+Fees.Views.Books.IndexView = Grid.IndexView.extend({
+ id: "books",
+ template : JST["templates/books/index"],
+
+ initialize: function(){
+ this.editView = Fees.Views.Books.EditView;
+ },
+
+ noop: null
+});
View
@@ -0,0 +1,22 @@
+//
+// NEW : Book
+//
+Fees.Views.Books = Fees.Views.Books || {};
+
+Fees.Views.Books.NewView = Grid.NewView.extend({
+ id: "new_book",
+ className: "new_view",
+ template : JST["templates/books/new"],
+
+ initialize: function() {
+ //if(this.collection) this.collection.bind("created", this.onCreate, this)
+ },
+
+ onCreate: function() {
+ //console.log("onCreate called... index re-rendered ?")
+ }
+
+
+});
+
+//_.extend(Fees.Views.Books.EditView.prototype, Fees.FormHelpers);
@@ -0,0 +1,30 @@
+//
+// PAGE : Book
+//
+Fees.Views.Books = Fees.Views.Books || {};
+
+Fees.Views.Books.PageView = Grid.PageView.extend({
+ id: "bookPage",
+ template: JST["templates/books/page"],
+ data: {},
+ events : {
+ "click .submenu a.reload" : "reloadIndex",
+ "click .submenu a.book" : "displayNew"
+ },
+
+ initialize: function() {
+ this.collection = Fees.books; // or new Fees.Collections.Books;
+ this.collection.fetch({data: this.data});
+ this.indexView = new Fees.Views.Books.IndexView({collection: this.collection});
+ this.newView = new Fees.Views.Books.NewView({collection: this.collection});
+ },
+
+ addToPage: function() {
+ this.filterView = new Fees.Views.Fees.FilterView({
+ collection: this.collection,
+ el: this.$(".filters")
+ })
+ },
+
+ noop : null
+});
@@ -0,0 +1,18 @@
+//
+// SHOW : Book
+//
+Fees.Views.Books = Fees.Views.Books || {};
+
+Fees.Views.Books.ShowView = Grid.EditView.extend({
+ tagName : "tr",
+ className : "new_book",
+ template : JST["templates/books/show"],
+ cell : null,
+ attribute : null,
+ inputTag : null,
+
+
+ noop:null
+});
+
+//_.extend(Fees.Views.Books.EditView.prototype, Fees.FormHelpers);

0 comments on commit 50e2cdd

Please sign in to comment.