EmberJS、Helpers和ComputedProperty

Question

我有一个Helper，它接收一个元素数组，并根据第一个元素返回其他数组。

{{#each (sorted-strings myStrings) as |string|}}
  {{string}}
{{/each}}

“帮助者”的实现可以类似于：

// app/helpers/sorted-strings.js
import Ember from 'ember';

export function sortedStrings(params/*, hash*/) {
  return params[0].sort();
}

export default Ember.Helper.helper(sortedStrings);

该助手工作正常，但如果原始myString数组更改，则更改不会影响已经呈现的列表。

如何将ComputedProperty的行为与助手的结果结合起来

Answer 1

在经历了很多挣扎之后，我才发现正确的解决方案是声明一个组件，而不是一个助手。通过这种方式，我可以显式声明一个观察myStrings数组中变化的计算属性：

// app/components/sorted-strings.js
export default Ember.Component.extend({
  myStrings: null,
  sortedMyStrings: Ember.computed('myStrings', function() {
    return this.get('myStrings').sort();
  });
});

// app/templates/components/sorted-strings.hbs
{{#each sortedMyStrings as |string|}}
  {{string}}
{{/each}}

// template
{{sorted-strings myStrings=myStrings}}

Answer 2

使用notifyPropertyChange()，它将通知助手数组已更改。我认为助手有一个对数组的引用，并且不知道它的内容或长度发生了变化

像这样

actions: {
    add() {
     this.get('myStrings').pushObject('testing');
     this.notifyPropertyChange('myStrings');
    }
  }

我已经更新了Twiddle -这是新的链接https://ember-twiddle.com/31dfcb7b208eb1348f34d90c98f50bbb?openFiles=controllers.application.js%2C

Answer 3

将计算过的属性传递给助手应该可以正常工作。看看这个转盘。

可能您的计算属性没有正确更新。