get from model and then set a new property on it

Question

I have a component:

App.MyChildComponent = Ember.Component.extend({
  addTooltips: Ember.on('didInsertElement', function() {
    var me = this;
    var metrics = this.get('option.metrics');
    metrics.forEach(function(e, i) {
       me.get('option.metrics').objectAt(i - 1).set('tooltipDisabled', true);
    });
  });
})

Which is generated inside an each loop by a different component:

App.MyParentComponent = Ember.Component.extend({
  ...
})

And the template of MyParentComponent is:

{{#each option in options}}
    {{my-child option=option}}
{{/each}}

All this, is called by a view with a template like this:

{{my-parent options=options}}

options is defined in the model of the view with:

App.MyViewModel = Ember.Object.extend({
    options: Ember.A([
        { metrics: Ember.A([
            { name: 'a' },
            { name: 'b' },
            { name: 'c' }
        ]) },
        { metrics: Ember.A([
            { name: 'd' },
            { name: 'e' },
            { name: 'f' }
        ]) },
        { metrics: Ember.A([
            { name: 'g' },
            { name: 'h' },
            { name: 'i' }
        ]) }
    ]),
});

When I run me.get('option.metrics').objectAt(i - 1).set('tooltipDisabled', true); I get:

Uncaught TypeError: me.get(...).objectAt(...).set is not a function

What am I doing wrong?

Answer 1

Vanilla JavaScript objects don't have set methods. Use Ember.Objects instead:

App.MyViewModel = Ember.Object.extend({
    options: Ember.A([
        { metrics: Ember.A([
            Ember.Object.create({ name: 'a' }),
            // ...
        ]) }
    ]),
});

Demo.