Scott Baker | 1dd345e | 2014-07-07 17:06:07 -0700 | [diff] [blame^] | 1 | (function(){ |
| 2 | |
| 3 | window.SliverView = Backbone.View.extend({ |
| 4 | tagName: 'li', |
| 5 | className: 'XOSLib.sliver', |
| 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 | |
| 43 | window.InputView = Backbone.View.extend({ |
| 44 | events: { |
| 45 | 'click .sliver': 'createSliver', |
| 46 | 'keypress #message': 'createOnEnter' |
| 47 | }, |
| 48 | |
| 49 | createOnEnter: function(e){ |
| 50 | if((e.keyCode || e.which) == 13){ |
| 51 | this.createSliver(); |
| 52 | e.preventDefault(); |
| 53 | } |
| 54 | |
| 55 | }, |
| 56 | |
| 57 | createSliver: function(){ |
| 58 | var message = this.$('#message').val(); |
| 59 | if(message){ |
| 60 | this.collection.create({ |
| 61 | message: message |
| 62 | }); |
| 63 | this.$('#message').val(''); |
| 64 | } |
| 65 | } |
| 66 | |
| 67 | }); |
| 68 | |
| 69 | window.ListView = Backbone.View.extend({ |
| 70 | initialize: function(){ |
| 71 | _.bindAll(this, 'addOne', 'addAll'); |
| 72 | |
| 73 | this.collection.bind('add', this.addOne); |
| 74 | this.collection.bind('reset', this.addAll, this); |
| 75 | this.views = []; |
| 76 | }, |
| 77 | |
| 78 | addAll: function(){ |
| 79 | this.views = []; |
| 80 | this.collection.each(this.addOne); |
| 81 | }, |
| 82 | |
| 83 | addOne: function(sliver){ |
| 84 | var view = new SliverView({ |
| 85 | model: XOSLib.sliver |
| 86 | }); |
| 87 | $(this.el).prepend(view.render().el); |
| 88 | this.views.push(view); |
| 89 | view.bind('all', this.rethrow, this); |
| 90 | }, |
| 91 | |
| 92 | rethrow: function(){ |
| 93 | this.trigger.apply(this, arguments); |
| 94 | } |
| 95 | |
| 96 | }); |
| 97 | |
| 98 | window.ListApp = Backbone.View.extend({ |
| 99 | el: "#app", |
| 100 | |
| 101 | rethrow: function(){ |
| 102 | this.trigger.apply(this, arguments); |
| 103 | }, |
| 104 | |
| 105 | render: function(){ |
| 106 | console.log("listApp.render"); |
| 107 | $(this.el).html(ich.listApp({})); |
| 108 | var list = new ListView({ |
| 109 | collection: this.collection, |
| 110 | el: this.$('#slivers') |
| 111 | }); |
| 112 | list.addAll(); |
| 113 | list.bind('all', this.rethrow, this); |
| 114 | new InputView({ |
| 115 | collection: this.collection, |
| 116 | el: this.$('#input') |
| 117 | }); |
| 118 | } |
| 119 | }); |
| 120 | |
| 121 | |
| 122 | window.Router = Backbone.Router.extend({ |
| 123 | routes: { |
| 124 | '': 'list', |
| 125 | ':id/': 'detail' |
| 126 | }, |
| 127 | |
| 128 | navigate_to: function(model){ |
| 129 | var path = (model && model.get('id') + '/') || ''; |
| 130 | console.log("Router.navigate_to"); |
| 131 | this.navigate(path, true); |
| 132 | }, |
| 133 | |
| 134 | detail: function(){ console.log("Router.detail"); }, |
| 135 | |
| 136 | list: function(){ console.log("Router.list"); } |
| 137 | }); |
| 138 | |
| 139 | $(function(){ |
| 140 | window.app = window.app || {}; |
| 141 | app.router = new Router(); |
| 142 | app.slivers = new XOSLib.slivers(); |
| 143 | app.list = new ListApp({ |
| 144 | el: $("#app"), |
| 145 | collection: app.slivers |
| 146 | }); |
| 147 | app.detail = new DetailApp({ |
| 148 | el: $("#app") |
| 149 | }); |
| 150 | app.router.bind('route:list', function(){ |
| 151 | console.log("Router:list2"); |
| 152 | app.slivers.maybeFetch({ |
| 153 | success: _.bind(app.list.render, app.list) |
| 154 | }); |
| 155 | }); |
| 156 | app.router.bind('route:detail', function(id){ |
| 157 | console.log("Router:detail2"); |
| 158 | app.slivers.getOrFetch(app.slivers.urlRoot + id + '/', { |
| 159 | success: function(model){ |
| 160 | app.detail.model = model; |
| 161 | app.detail.render(); |
| 162 | } |
| 163 | }); |
| 164 | }); |
| 165 | |
| 166 | app.slivers.maybeFetch({ |
| 167 | success: _.bind(app.list.render, app.list) |
| 168 | }); |
| 169 | |
| 170 | app.list.bind('navigate', app.router.navigate_to, app.router); |
| 171 | app.detail.bind('home', app.router.navigate_to, app.router); |
| 172 | Backbone.history.start({ |
| 173 | pushState: true, |
| 174 | silent: app.loaded |
| 175 | }); |
| 176 | }); |
| 177 | })(); |