javascript - Ember - 动态地将依赖键数组传递给计算属性

Question

我想创建一个组件，它采用属性名称列表，然后动态构建一个计算属性，该属性将列表中的每个值作为依赖键。

{{buttons-list-component
  title="Status"
  propertyNames="active, expired, pending"
  toggleProperty="toggleProperty"
  active=active
  expired=expired
  pending=pending
}}

对于上面的示例，我想将作为 propertyNames 传递的字符串，将其拆分为一个数组，然后让 optionsObject 计算属性监视中的每个值数组就像显式传递的一样。

propertiesArray: function() {
  return this.get('propertyNames').split(", ");
}.property('propertyNames'),

当属性active更新时，下面的代码将不会运行，因为propertyNames还没有更新，因此propertiesArray已经没有改变。

optionsObject: function() {
  console.log("foo") // Does not run.
}.property('propertiesArray.@each'),

是否有一种方法可以构建计算属性，使其与下面的代码以相同的方式工作，但无需显式传递 optionsObject 所依赖的每个属性的字符串值？

optionsObject: function() {
  console.log("bar") // Does run.
}.property('active', 'expired', 'pending''),

Answer 1

您的 propertyNames 正在传递一个常量字符串 propertyNames="active,expired,pending" - 因此，要在事件更改时更新 propertyNames，请将计算属性传递给 propertyNames，该属性是根据这三个属性计算得出的特性。

propertyString: function() {
  return `${active} ${active} ${active}`
}.property('active', 'expired', 'pending'),

现在，当 propertyString 更新时，您的 propertyNames 将更新，这将触发propertiesArray。

这里还要注意一点，您需要观察propertiesArray.[]而不是@each——@each在观察子属性时使用。

此外，您应该使用新的计算属性格式 - https://guides.emberjs.com/v2.18.0/object-model/computed-properties/#toc-toggle很好地解释了我提到的两点