1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 | 1 135 135 135 84 77 77 77 15 15 15 15 4 4 150 150 147 147 98 98 98 97 97 153 153 153 115 38 115 115 181 180 91 91 19 19 19 168 9 9 133 133 1 132 216 216 4 216 216 216 216 216 215 3 215 216 216 311 311 311 311 216 216 216 216 8 8 8 65 65 65 1 65 65 191 53 148 135 24 20 20 20 20 183 57 183 | // Collection View // --------------- // A view that iterates over a Backbone.Collection // and renders an individual ItemView for each model. Marionette.CollectionView = Marionette.View.extend({ // used as the prefix for item view events // that are forwarded through the collectionview itemViewEventPrefix: "itemview", // constructor constructor: function(options){ this._initChildViewStorage(); Marionette.View.prototype.constructor.apply(this, slice(arguments)); this._initialEvents(); }, // Configured the initial events that the collection view // binds to. Override this method to prevent the initial // events, or to add your own initial events. _initialEvents: function(){ if (this.collection){ this.listenTo(this.collection, "add", this.addChildView, this); this.listenTo(this.collection, "remove", this.removeItemView, this); this.listenTo(this.collection, "reset", this.render, this); } }, // Handle a child item added to the collection addChildView: function(item, collection, options){ this.closeEmptyView(); var ItemView = this.getItemView(item); var index = this.collection.indexOf(item); this.addItemView(item, ItemView, index); }, // Override from `Marionette.View` to guarantee the `onShow` method // of child views is called. onShowCalled: function(){ this.children.each(function(child){ Marionette.triggerMethod.call(child, "show"); }); }, // Internal method to trigger the before render callbacks // and events triggerBeforeRender: function(){ this.triggerMethod("before:render", this); this.triggerMethod("collection:before:render", this); }, // Internal method to trigger the rendered callbacks and // events triggerRendered: function(){ this.triggerMethod("render", this); this.triggerMethod("collection:rendered", this); }, // Render the collection of items. Override this method to // provide your own implementation of a render function for // the collection view. render: function(){ this.isClosed = false; this.triggerBeforeRender(); this._renderChildren(); this.triggerRendered(); return this; }, // Internal method. Separated so that CompositeView can have // more control over events being triggered, around the rendering // process _renderChildren: function(){ this.closeEmptyView(); this.closeChildren(); if (this.collection && this.collection.length > 0) { this.showCollection(); } else { this.showEmptyView(); } }, // Internal method to loop through each item in the // collection view and show it showCollection: function(){ var ItemView; this.collection.each(function(item, index){ ItemView = this.getItemView(item); this.addItemView(item, ItemView, index); }, this); }, // Internal method to show an empty view in place of // a collection of item views, when the collection is // empty showEmptyView: function(){ var EmptyView = Marionette.getOption(this, "emptyView"); if (EmptyView && !this._showingEmptyView){ this._showingEmptyView = true; var model = new Backbone.Model(); this.addItemView(model, EmptyView, 0); } }, // Internal method to close an existing emptyView instance // if one exists. Called when a collection view has been // rendered empty, and then an item is added to the collection. closeEmptyView: function(){ if (this._showingEmptyView){ this.closeChildren(); delete this._showingEmptyView; } }, // Retrieve the itemView type, either from `this.options.itemView` // or from the `itemView` in the object definition. The "options" // takes precedence. getItemView: function(item){ var itemView = Marionette.getOption(this, "itemView"); if (!itemView){ throwError("An `itemView` must be specified", "NoItemViewError"); } return itemView; }, // Render the child item's view and add it to the // HTML for the collection view. addItemView: function(item, ItemView, index){ // get the itemViewOptions if any were specified var itemViewOptions = Marionette.getOption(this, "itemViewOptions"); if (_.isFunction(itemViewOptions)){ itemViewOptions = itemViewOptions.call(this, item, index); } // build the view var view = this.buildItemView(item, ItemView, itemViewOptions); // set up the child view event forwarding this.addChildViewEventForwarding(view); // this view is about to be added this.triggerMethod("before:item:added", view); // Store the child view itself so we can properly // remove and/or close it later this.children.add(view); // Render it and show it this.renderItemView(view, index); // call the "show" method if the collection view // has already been shown if (this._isShown){ Marionette.triggerMethod.call(view, "show"); } // this view was added this.triggerMethod("after:item:added", view); }, // Set up the child view event forwarding. Uses an "itemview:" // prefix in front of all forwarded events. addChildViewEventForwarding: function(view){ var prefix = Marionette.getOption(this, "itemViewEventPrefix"); // Forward all child item view events through the parent, // prepending "itemview:" to the event name this.listenTo(view, "all", function(){ var args = slice(arguments); args[0] = prefix + ":" + args[0]; args.splice(1, 0, view); Marionette.triggerMethod.apply(this, args); }, this); }, // render the item view renderItemView: function(view, index) { view.render(); this.appendHtml(this, view, index); }, // Build an `itemView` for every model in the collection. buildItemView: function(item, ItemViewType, itemViewOptions){ var options = _.extend({model: item}, itemViewOptions); return new ItemViewType(options); }, // get the child view by item it holds, and remove it removeItemView: function(item){ var view = this.children.findByModel(item); this.removeChildView(view); this.checkEmpty(); }, // Remove the child view and close it removeChildView: function(view){ // shut down the child view properly, // including events that the collection has from it Eif (view){ this.stopListening(view); // call 'close' or 'remove', depending on which is found if (view.close) { view.close(); } else Eif (view.remove) { view.remove(); } this.children.remove(view); } this.triggerMethod("item:removed", view); }, // helper to show the empty view if the collection is empty checkEmpty: function() { // check if we're empty now, and if we are, show the // empty view if (!this.collection || this.collection.length === 0){ this.showEmptyView(); } }, // Append the HTML to the collection's `el`. // Override this method to do something other // then `.append`. appendHtml: function(collectionView, itemView, index){ collectionView.$el.append(itemView.el); }, // Internal method to set up the `children` object for // storing all of the child views _initChildViewStorage: function(){ this.children = new Backbone.ChildViewContainer(); }, // Handle cleanup and other closing needs for // the collection of views. close: function(){ if (this.isClosed){ return; } this.triggerMethod("collection:before:close"); this.closeChildren(); this.triggerMethod("collection:closed"); Marionette.View.prototype.close.apply(this, slice(arguments)); }, // Close the child views that this collection view // is holding on to, if any closeChildren: function(){ this.children.each(function(child){ this.removeChildView(child); }, this); this.checkEmpty(); } }); |