Question

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

＆＃13;

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

＆＃13;

对于上面的示例，我想将传递的字符串作为propertyNames，将其拆分为一个数组，然后让optionsObject计算属性监视数组中的每个值，就好像它是明确地通过了。

＆＃13;

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

＆＃13;

更新属性active后，以下代码将无法运行，因为propertyNames尚未更新，因此propertiesArray尚未更改。

＆＃13;

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

＆＃13;

有没有办法构建计算属性，以便它可以像下面的代码一样工作，但是没有显式传递optionsObject所依赖的每个属性的字符串值？

＆＃13;

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

＆＃13;

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解释我提到的两点

Ember - 将依赖键的数组动态传递给computed属性

1 个答案: