Make the collection view insertion point custom #1323

Closed
wants to merge 1 commit into
from

Projects

None yet

5 participants

@redotheoffice

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')
});
@redotheoffice redotheoffice 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
@travisbot

This pull request passes (merged ee2e3c8 into e60e818).

@trek
Member
trek commented Aug 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')
});
@redotheoffice

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

@wagenet
Member
wagenet commented Aug 28, 2012

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

@wagenet
Member
wagenet commented Oct 8, 2012

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

@wagenet wagenet closed this Oct 8, 2012
@manoharank

@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