Skip to content
This repository

Make the collection view insertion point custom #1323

Closed
wants to merge 1 commit into from

5 participants

Sjoerd de Jong Don't Add Me To Your Organization a.k.a The Travis Bot Trek Glowacki Peter Wagenet ManoHaran
Sjoerd de Jong

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')
});
Sjoerd de Jong 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')
});
ee2e3c8
Don't Add Me To Your Organization a.k.a The Travis Bot

This pull request passes (merged ee2e3c8 into e60e818).

Trek Glowacki
Owner
trek commented August 25, 2012

Would Ember.alias do this for you?

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

  src: function() {
    return 'img/number_%@.png'.fmt(this.get('digit));
  }.property('digit')
});
Sjoerd de Jong

I tried your solution, but could not get it to work
--> working example using the content property see fiddle: http://jsfiddle.net/q6UzW/1/
--> trying with your suggestion see fiddle: http://jsfiddle.net/q6UzW/2/ (only change is DigitView now depends on digit property)

My opinion is it's the wrong way around to change the itemViewClass to accommodate for the content property.
The CollectionView always knows how the itemViewClass is implemented. The itemViewClass does not have to know in which other classes it's used.

I hope it's clear what I try to express, it's a little hard to explain... Thanks

Peter Wagenet
Owner

Content is the general default in Ember. This seems like a low priority but I'm still open to it.

Peter Wagenet
Owner

Alias seems like the right solution. If that's not working, then it seems like a bug. Alternatively, you can just do: contentBinding: 'src'.

Peter Wagenet wagenet closed this October 08, 2012
ManoHaran

@wagenet @trek In my case, the itemViewClass itself is a CollectionView

// Here i need loop through 'columns' array, not 'content' set by parent view
App.TRView = Ember.CollectionView.extend({
  columns: ["name", "age"]
});

// If i can able to set the itemViewProperty to other than 'content', then
// i can rename 'columns' property in the above TRView to 'content'
App.TBodyView = Ember.CollectionView.extend({
  itemViewClass: App.TRView
});

I think @redotheoffice's solution will work in this case. Any idea on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Aug 25, 2012
Sjoerd de Jong 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')
});
ee2e3c8
This page is out of date. Refresh to see the latest.
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
       }
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.