【问题标题】:trigger computed to be recalculated when observableArray element property is changed当 observableArray 元素属性更改时,触发计算以重新计算
【发布时间】:2014-06-08 19:51:40
【问题描述】:

我有带有元素的observableArray(元素不是可观察的,而是一些不可观察的对象)。我还有 computed 依赖于 observableArray 的变量。如果我将元素推入数组,那么一切正常(我的意思是 - 计算变量被重新计算)。

但是,如果我更改 observableArray 单个项目的某些属性,则不会重新计算计算:

var myObsArr = ko.observableArray();

// myObsArr is loaded using ko.mapping.fromJS with data from server
// but I am using custom mapping that won't create observables for observableArray items, part of my custom mapping (the one that corresponds to observable item) is something like this:
 create: function (options) {
    // here are some manipulations and
    return ko.toJS(options.data); //doesn't create observables for observableArry items
}

var computedArr = ko.computed(function() {
   var t = self.myObsArr();
   // do manipulations on t and return manipulated array
});

// later I need to change some elements of observable array, for example:
myObsArr[0].Month = "Mar"; //doesn't trigger computed to be recalculated

当可观察数组中的任何对象发生更改时,如何触发重新计算计算?

【问题讨论】:

  • 如果myObsArr 加载了ko.mapping.fromJS,那么Month 通常是一个ko.observable,因为映射。所以你应该设置myObsArr[0].Month("Mar");,如果你在你的计算中访问Month(),那么它也应该被更新。否则在更改Month后调用valueHasMutatedmyObsArr[0].Month = "Mar"; myObsArr.valueHasMutated();
  • 抱歉,我的描述有误。我正在做不会为数组元素创建可观察对象的自定义映射。但也许我可以改变逻辑并使所有项目都可观察,这有帮助吗?或者我可以在不将 Month 和其他属性转换为 observables 的情况下使用 valueHasMutated 吗?
  • myObsArr.valueHasMutated(); 将起作用,只要您在每次更改数组中的某些内容后不要忘记调用它。因此,您最好将在计算中使用的属性转换为可观察值,因为这样您就可以免费获得更改跟踪。
  • valueHasMuted 帮助了我,这是对我有用的答案。由于有点紧急,我将使用 valueHasMuted 保持原样,但稍后我可能会更改为 observables...

标签: knockout.js


【解决方案1】:

修改其中一个元素后,您可以在 myObsArr 上调用 valueHasMutated 方法。它将触发淘汰依赖跟踪,您的computedArr 将收到有关更改的通知:

myObsArr[0].Month = "Mar";
myObsArr.valueHasMutated();

但是,您必须记住每次更改数组中的项目时都调用它,因此您最好将 Month 转换为 ko.observable,因为在这种情况下,ko 更改跟踪将自动选择更改并且它无需任何额外代码即可通知您的计算。

【讨论】:

    猜你喜欢
    • 2019-12-05
    • 1970-01-01
    • 2017-07-22
    • 1970-01-01
    • 1970-01-01
    • 2019-06-18
    • 2015-01-28
    • 1970-01-01
    相关资源
    最近更新 更多