Permalink
Browse files

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...
1 parent e60e818 commit ee2e3c80999e9121d6c2899ab59c3311c79d98ce @redotheoffice committed Aug 25, 2012
Showing with 13 additions and 6 deletions.
  1. +13 −6 packages/ember-views/lib/views/collection_view.js
@@ -157,7 +157,13 @@ Ember.CollectionView = Ember.ContainerView.extend(
*/
itemViewClass: Ember.View,
- /** @private */
+ /**
+ @type string
+ @default "content"
+ */
+ itemViewProperty: "content",
+
+/** @private */
init: function() {
var ret = this._super();
this._contentDidChange();
@@ -247,7 +253,8 @@ Ember.CollectionView = Ember.ContainerView.extend(
arrayDidChange: function(content, start, removed, added) {
var itemViewClass = get(this, 'itemViewClass'),
childViews = get(this, 'childViews'),
- addedViews = [], view, item, idx, len, itemTagName;
+ property = get(this, 'itemViewProperty'),
+ addedViews = [], view, item, idx, len, itemTagName, childObject;
if ('string' === typeof itemViewClass) {
itemViewClass = get(itemViewClass);
@@ -260,10 +267,10 @@ Ember.CollectionView = Ember.ContainerView.extend(
for (idx = start; idx < start+added; idx++) {
item = content.objectAt(idx);
- view = this.createChildView(itemViewClass, {
- content: item,
- contentIndex: idx
- });
+ childObject = {};
+ childObject[property] = item;
+ childObject[property+"Index"] = idx;
+ view = this.createChildView(itemViewClass, childObject);
addedViews.push(view);
}

0 comments on commit ee2e3c8

Please sign in to comment.