EmberJS、助手和计算属性
EmberJS, Helpers and ComputedProperty
我有一个 Helper,它接收一个元素数组和 returns 一些基于第一个元素的其他数组。
{{#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 的结果?
将计算的 属性 传递给助手应该可以正常工作。看看这个 twiddle。
也许您计算的 属性 没有正确更新。
使用 notifyPropertyChange()
将通知助手数组已更改。我认为 helper 有一个对数组的引用并且不知道它的内容或长度已经改变
像这样
actions: {
add() {
this.get('myStrings').pushObject('testing');
this.notifyPropertyChange('myStrings');
}
}
我更新了 Twiddle - 这是新的 link https://ember-twiddle.com/31dfcb7b208eb1348f34d90c98f50bbb?openFiles=controllers.application.js%2C
经过一番努力后,我才发现正确的解决方案是声明一个 Component 而不是 Helper。这样我就可以显式声明一个 Computed 属性 来观察 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}}
我有一个 Helper,它接收一个元素数组和 returns 一些基于第一个元素的其他数组。
{{#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 的结果?
将计算的 属性 传递给助手应该可以正常工作。看看这个 twiddle。
也许您计算的 属性 没有正确更新。
使用 notifyPropertyChange()
将通知助手数组已更改。我认为 helper 有一个对数组的引用并且不知道它的内容或长度已经改变
像这样
actions: {
add() {
this.get('myStrings').pushObject('testing');
this.notifyPropertyChange('myStrings');
}
}
我更新了 Twiddle - 这是新的 link https://ember-twiddle.com/31dfcb7b208eb1348f34d90c98f50bbb?openFiles=controllers.application.js%2C
经过一番努力后,我才发现正确的解决方案是声明一个 Component 而不是 Helper。这样我就可以显式声明一个 Computed 属性 来观察 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}}