Scott Baker | 1dd345e | 2014-07-07 17:06:07 -0700 | [diff] [blame] | 1 | (function(){ |
| 2 | |
| 3 | window.SliverView = Backbone.View.extend({ |
| 4 | tagName: 'li', |
Scott Baker | b7aba68 | 2014-07-07 21:30:52 -0700 | [diff] [blame] | 5 | className: 'sliver', |
Scott Baker | 1dd345e | 2014-07-07 17:06:07 -0700 | [diff] [blame] | 6 | |
| 7 | events: { |
| 8 | 'click .permalink': 'navigate' |
| 9 | }, |
| 10 | |
| 11 | initialize: function(){ |
| 12 | this.model.bind('change', this.render, this); |
| 13 | }, |
| 14 | |
| 15 | navigate: function(e){ |
| 16 | this.trigger('navigate', this.model); |
| 17 | e.preventDefault(); |
| 18 | }, |
| 19 | |
| 20 | render: function(){ |
| 21 | $(this.el).html(ich.sliverTemplate(this.model.toJSON())); |
| 22 | return this; |
| 23 | } |
| 24 | }); |
| 25 | |
| 26 | |
| 27 | window.DetailApp = Backbone.View.extend({ |
| 28 | events: { |
| 29 | 'click .home': 'home' |
| 30 | }, |
| 31 | |
| 32 | home: function(e){ |
| 33 | this.trigger('home'); |
| 34 | e.preventDefault(); |
| 35 | }, |
| 36 | |
| 37 | render: function(){ |
| 38 | $(this.el).html(ich.detailApp(this.model.toJSON())); |
| 39 | return this; |
| 40 | } |
| 41 | }); |
| 42 | |
Scott Baker | 1dd345e | 2014-07-07 17:06:07 -0700 | [diff] [blame] | 43 | window.ListView = Backbone.View.extend({ |
| 44 | initialize: function(){ |
| 45 | _.bindAll(this, 'addOne', 'addAll'); |
| 46 | |
| 47 | this.collection.bind('add', this.addOne); |
| 48 | this.collection.bind('reset', this.addAll, this); |
| 49 | this.views = []; |
| 50 | }, |
| 51 | |
| 52 | addAll: function(){ |
| 53 | this.views = []; |
| 54 | this.collection.each(this.addOne); |
| 55 | }, |
| 56 | |
| 57 | addOne: function(sliver){ |
| 58 | var view = new SliverView({ |
Scott Baker | b7aba68 | 2014-07-07 21:30:52 -0700 | [diff] [blame] | 59 | model: sliver |
Scott Baker | 1dd345e | 2014-07-07 17:06:07 -0700 | [diff] [blame] | 60 | }); |
| 61 | $(this.el).prepend(view.render().el); |
| 62 | this.views.push(view); |
| 63 | view.bind('all', this.rethrow, this); |
| 64 | }, |
| 65 | |
| 66 | rethrow: function(){ |
| 67 | this.trigger.apply(this, arguments); |
| 68 | } |
| 69 | |
| 70 | }); |
| 71 | |
| 72 | window.ListApp = Backbone.View.extend({ |
| 73 | el: "#app", |
| 74 | |
| 75 | rethrow: function(){ |
| 76 | this.trigger.apply(this, arguments); |
| 77 | }, |
| 78 | |
| 79 | render: function(){ |
| 80 | console.log("listApp.render"); |
Scott Baker | b7aba68 | 2014-07-07 21:30:52 -0700 | [diff] [blame] | 81 | console.log(this.collection); |
Scott Baker | 1dd345e | 2014-07-07 17:06:07 -0700 | [diff] [blame] | 82 | $(this.el).html(ich.listApp({})); |
| 83 | var list = new ListView({ |
| 84 | collection: this.collection, |
| 85 | el: this.$('#slivers') |
| 86 | }); |
| 87 | list.addAll(); |
| 88 | list.bind('all', this.rethrow, this); |
Scott Baker | 1dd345e | 2014-07-07 17:06:07 -0700 | [diff] [blame] | 89 | } |
| 90 | }); |
| 91 | |
| 92 | |
| 93 | window.Router = Backbone.Router.extend({ |
| 94 | routes: { |
| 95 | '': 'list', |
| 96 | ':id/': 'detail' |
| 97 | }, |
| 98 | |
| 99 | navigate_to: function(model){ |
| 100 | var path = (model && model.get('id') + '/') || ''; |
| 101 | console.log("Router.navigate_to"); |
| 102 | this.navigate(path, true); |
| 103 | }, |
| 104 | |
| 105 | detail: function(){ console.log("Router.detail"); }, |
| 106 | |
| 107 | list: function(){ console.log("Router.list"); } |
| 108 | }); |
| 109 | |
| 110 | $(function(){ |
| 111 | window.app = window.app || {}; |
| 112 | app.router = new Router(); |
Scott Baker | 95d6c5c | 2014-07-07 21:54:35 -0700 | [diff] [blame] | 113 | app.slivers = xos.slivers; //new XOSLib.slivers(); |
Scott Baker | 1dd345e | 2014-07-07 17:06:07 -0700 | [diff] [blame] | 114 | app.list = new ListApp({ |
| 115 | el: $("#app"), |
| 116 | collection: app.slivers |
| 117 | }); |
| 118 | app.detail = new DetailApp({ |
| 119 | el: $("#app") |
| 120 | }); |
| 121 | app.router.bind('route:list', function(){ |
Scott Baker | 1dd345e | 2014-07-07 17:06:07 -0700 | [diff] [blame] | 122 | app.slivers.maybeFetch({ |
| 123 | success: _.bind(app.list.render, app.list) |
| 124 | }); |
| 125 | }); |
| 126 | app.router.bind('route:detail', function(id){ |
Scott Baker | 1dd345e | 2014-07-07 17:06:07 -0700 | [diff] [blame] | 127 | app.slivers.getOrFetch(app.slivers.urlRoot + id + '/', { |
| 128 | success: function(model){ |
| 129 | app.detail.model = model; |
| 130 | app.detail.render(); |
| 131 | } |
| 132 | }); |
| 133 | }); |
| 134 | |
| 135 | app.slivers.maybeFetch({ |
| 136 | success: _.bind(app.list.render, app.list) |
| 137 | }); |
| 138 | |
| 139 | app.list.bind('navigate', app.router.navigate_to, app.router); |
| 140 | app.detail.bind('home', app.router.navigate_to, app.router); |
| 141 | Backbone.history.start({ |
| 142 | pushState: true, |
| 143 | silent: app.loaded |
| 144 | }); |
| 145 | }); |
| 146 | })(); |