时间戳

首页 > 解决方案 > Ember.JS 强制计算属性重新计算

javascript - Ember.JS 强制计算属性重新计算

问题描述

所以我的 Ember 应用程序中有一个计算属性。声明为myComProp: computed('itemTrait', function () {...}). myComProp 属于一个项目模型。在一个单独的组件（listItem）中，我有一个属性是 myComProp: 的别名myAlias: alias('itemModel.myComProp')。现在 listItems 是 listItems 数组的成员，其属性在 Web 应用程序中呈现。

现在通过属性是别名，有没有办法强制计算属性重新计算？

我尝试将别名设置为跟踪属性，但这样做会将调用堆栈作为字符串返回，而不是计算函数的实际结果。

更新

添加此内容以更好地解释。

// itemModel.js
export default parentModel.extend({
   //irrelevant properties

   myComProp: computed('itemTrait', function() {
       // logic
   })
});

在其他地方有两个组件。一个是呈现 itemModel 列表的页面部分，另一个是 itemModel 的表示（由列表组件从数据存储中获取）

// itemModelRep/component.js
export default Component.extend({
    // other properties

    myAlias('item.myComProp')
    // itemModel is represented in the list by 'item'
});

和清单：

//itemList.js

export default parentDisplay.extend({
    // other properties

    get items() {
        // this is what is used as the list items
        // it basically gets a list of items from the itemModel record set in
        // the data store

        listOfItems.forEach((item) => {
             // Other stuff going on
             // Here I want to force the property to recompute
        };
    }
});

基本上 myComProp 正在获取相关日期，当我用新项目更新列表时，我想重新计算相关日期。获取事件基于跟踪列表，因此每次将实时提要添加到时都会运行

标签： javascriptember.jsaliascomputed-properties

解决方案

让我看看我是否理解你的问题：

// app/models/item.js

myComProp: computed('itemTrait', function () {...});

和

// app/components/list-item.js

itemModel: null, // passed in

myAlias: alias('itemModel.myComProp'),

listItems: null,

init() {
  this._super(...arguments);
  this.listItems = [this.itemModel];
}

actions: {
  changeItem() {
    this.itemModel.itemTrait = 'new value';
  }
}

什么时候changeItem被调用，itemModel.itemTrait改变并且listItems不表达这些改变？

如果是这样，问题不在于您的计算属性或别名没有更新。问题是列表不知道它需要更新。

快速修复：

actions: {
  changeItem() {
    this.itemModel.itemTrait = 'new value';
    this.notifyPropertyChange('listItems');
  }
}

这里有一些信息notifyPropertyChange：https ://api.emberjs.com/ember/3.20/classes/Component/methods/notifyPropertyChange?anchor=notifyPropertyChange

如果我误解了您的问题，请解释和/或更新您的问题。

这个答案是 Ember 3.20 的最新答案

推荐阅读