Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Make the collection view insertion point custom

In the current implementation collection view injects the 'content' property into its child view. 
Personally I like some flexibility here, to allow for better nomenclature in my view objects.

As an example I made a simple number to image replacement. It's used in a game, where custom artwork is often much nicer than browser fonts.

App.DigitView = Ember.View.extend({
  tagName: "img",
  classNames: ['digit'],
  attributeBindings: ['src'],

  digit: 0,

  src: function() {
    return 'img/number_'+this.get('digit')+'.png';
  }.property('digit')
});

App.NumberView = Ember.CollectionView.extend({
  itemViewClass: App.DigitView,
  itemViewProperty: "digit",
  tagName: "span",

  number: 0,

  content: function() {
    return (this.get('number')+'').split('');
  }.property('number')
});

Using the current implementation I'm forced to use the 'content' property in DigitView, which makes the purpose of the view less clear.

App.DigitView = Ember.View.extend({
  tagName: "img",
  classNames: ['digit'],
  attributeBindings: ['src'],

  content: 0,

  src: function() {
    return 'img/number_'+this.get('content')+'.png';
  }.property('content')
});
  • Loading branch information...
commit ee2e3c80999e9121d6c2899ab59c3311c79d98ce 1 parent e60e818
Sjoerd de Jong authored August 25, 2012
19  packages/ember-views/lib/views/collection_view.js
@@ -157,7 +157,13 @@ Ember.CollectionView = Ember.ContainerView.extend(
157 157
   */
158 158
   itemViewClass: Ember.View,
159 159
 
160  
-  /** @private */
  160
+  /**
  161
+    @type string
  162
+    @default "content"
  163
+  */
  164
+  itemViewProperty: "content",
  165
+
  166
+/** @private */
161 167
   init: function() {
162 168
     var ret = this._super();
163 169
     this._contentDidChange();
@@ -247,7 +253,8 @@ Ember.CollectionView = Ember.ContainerView.extend(
247 253
   arrayDidChange: function(content, start, removed, added) {
248 254
     var itemViewClass = get(this, 'itemViewClass'),
249 255
         childViews = get(this, 'childViews'),
250  
-        addedViews = [], view, item, idx, len, itemTagName;
  256
+        property = get(this, 'itemViewProperty'),
  257
+        addedViews = [], view, item, idx, len, itemTagName, childObject;
251 258
 
252 259
     if ('string' === typeof itemViewClass) {
253 260
       itemViewClass = get(itemViewClass);
@@ -260,10 +267,10 @@ Ember.CollectionView = Ember.ContainerView.extend(
260 267
       for (idx = start; idx < start+added; idx++) {
261 268
         item = content.objectAt(idx);
262 269
 
263  
-        view = this.createChildView(itemViewClass, {
264  
-          content: item,
265  
-          contentIndex: idx
266  
-        });
  270
+        childObject = {};
  271
+        childObject[property] = item;
  272
+        childObject[property+"Index"] = idx;
  273
+        view = this.createChildView(itemViewClass, childObject);
267 274
 
268 275
         addedViews.push(view);
269 276
       }

0 notes on commit ee2e3c8

Please sign in to comment.
Something went wrong with that request. Please try again.