EmberJS、助手和 ComputedProperty

Posted 2023-02-23

【中文标题】EmberJS、助手和 ComputedProperty

【英文标题】：EmberJS, Helpers and ComputedProperty

【发布时间】：2016-10-14 21:32:10

【问题描述】：

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

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

Helper 的实现可以是这样的：

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

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


export default Ember.Helper.helper(sortedStrings);

Helper 工作正常，但如果原始 myString 数组发生更改，则更改不会影响已呈现的列表。

如何将 ComputedProperty 的行为与 Helper 的结果结合起来？

【参考方案1】：

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

这样

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

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

【讨论】：

这行得通，谢谢。但这太疯狂了，如果最后我必须明确通知更改，那么使用所有 get 和 set Ember 属性操纵器有什么意义？在我的情况下，数组元素属性由 x-select 助手修改，因此我很难调用 notifyPropertyChange。

我有here a twiddle，我正在使用ArrayProxy 以及set 和get 的所有电池来尝试强制Ember 对更改进行隐式通知，但它没有如果我评论显式通知，则工作：/

【参考方案2】：

经过一番挣扎后，我才发现正确的解决方案是声明一个 Component 而不是 Helper。这样我可以显式声明一个 Computed Property 来观察 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

【参考方案3】：

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

也许您的计算属性没有正确更新。