将本机数组/对象转换为Ember.Array / Ember.Object的最佳实践

Question

I have an ember component expecting a parameter as an array of objects. By default, this parameter is gonna be a native array with native objects inside. I'd like to transform this array into an ember array containing ember objects.

I was thinking about something like that, but this will create an infinite loop firing the observer every time:

export default Ember.Component.extend({
   content: null,

   contentDidChange: function () {
        var content = Ember.A();
        this.get('content').forEach(function (item) {
            content.addObject((item.constructor.toString() !== 'Ember.Object') ? Ember.Object.create(item) : item);
        });
        this.set('content', content);
    }.observes('content'),
});

What is the best practise to do that?

Thanks

Answer 1

You can just modify the initial parameter when the component first boots up on didInsertElement like so:

App.ArrContentComponent = Ember.Component.extend({
  content: null, 

  modifyContent: function(){
    var content = this.get('content').map(function(item){
      return Ember.Object.create({ name: item });
    });

    this.set('content', content);
  }.on('didInsertElement')
});

Working example here

Answer 2

If the reason why you need Objects inside your component is because you are doing this.get(.. then you can get around by using Ember.get(.. instead.

If thats not the case, then I would recommend binding your component to a transformed property, and not the original content .

transformedContent: null,
makeItem: function(item) { 
  return Ember.Object.create(item);
}),
cloneItems: function() { 
  this.set('transformedContent', this.get('content').map(this.makeItem));
}.observes('content'),

If you want best practice , then I would create a computed array , that transforms the items as they come and go, which you will be able to re use.

transformedContent: App.computed.objectArray('content')