Question

我有一个组件：

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);
    });
  });
})

由不同的组件在每个循环内生成：

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

MyParentComponent的模板是：

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

所有这一切，都由一个带有这样模板的视图调用：

{{my-parent options=options}}

选项在视图模型中定义：

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' }
        ]) }
    ]),
});

当我运行me.get('option.metrics').objectAt(i - 1).set('tooltipDisabled', true);时，我得到：

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

我做错了什么？

Answer 1

Vanilla JavaScript对象没有设置方法。请改用Ember.Object：

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

Demo.

从模型中获取，然后在其上设置一个新属性

1 个答案: