javascript - 具有多个依赖项的 Ember 属性不会按预期更新

Question

我在理解 ember 属性方面遇到以下问题:

如果我有特性A:

propertyA: function() {
  return this.get("propertyB.someObject.someValue");
}.property("propertyB")

和一个属性B:

propertyB: function() {
  return this.get("propertyX.someObject");
}.property("propertyX", "propertyY", "propertyZ")

我在某些模板中有一个 propertyA 的绑定(bind)，例如:

{{propertyA}}

然后，在我的代码中 90% 的情况下，当我设置(即 propertyX)时，propertyA 不会正确更新。

如果我理解正确，那么一旦依赖属性之一(如 propertyX)发生变化，propertyB 就应该变成脏。这应该会自动使 propertyA 脏 并因此自动更新它，因为它具有绑定(bind)。

我的代码中发生的情况是，即使我在控制台中调用 propertyA ，它仍然保留旧的缓存值，但是当我调用 propertyB 时，它会重新评估并返回更新了代码，因为它很脏。

问题是，为什么 propertyA 不会自动变脏，而 propertyB 却会自动变脏？是因为propertyB在模板中没有绑定(bind)吗？我认为如果propertyA有依赖就没有必要了。

我还发现，当 propertyB 仅依赖于 propertyX 时，不会出现此问题，因此多重依赖一定会以某种方式搞乱事情。

抱歉这个相当复杂的解释，但我试图尽可能简单地抽象我的实际代码。

更新:

好的，这里有一些实际的代码:

Controller :

styling: function() {
  var clipValues = this.get("clip.styling") || {};
  var infoValues = this.get("clip.info.styling") || {};
  return Ember.Object.create(jQuery.extend({}, clipValues, infos));
}.property("clip.styling", "clip.info.styling"),


showBottombar: function() {
  return (!!this.get("bottombarSrc") || !!this.get("styling.bottombar.fancyStuff"));
}.property("styling"),

在其他地方为此 Controller 设置剪辑。后来它的信息在剪辑模型中更新，这是一个简单的 Ember.Object:

getInfo: function(url) {
  var self = this;
  return App.ajax(url).then(function(response) {
    self.set("info", response);
  });
}

现在，调用 getInfo 后，即使“bottombarSrc”和“...fancyStuff”为 true，模板中的 {{showBottombar}} 也会显示“false”。当我从控制台调用“样式”时，它会重新评估样式代码，这表明在发生 Clip.getInfo (设置“信息”)后它被标记为脏。但这不会影响 showBottombar。它只是之后不会被调用。

更新2

有两种奇怪的方法可以使其工作，但我不明白为什么:

第一个是将样式绑定(bind)添加到模板:

{{styling}}

这会导致在样式更改后调用 showBottombar。

第二个是从样式属性中删除其他依赖项:

styling: function() {
  var clipValues = this.get("clip.styling") || {};
  var infoValues = this.get("clip.info.styling") || {};
  return Ember.Object.create(jQuery.extend({}, clipValues, infos));
}.property("clip.info.styling"),

(不再有“clip.styling”依赖)。这也会导致 showBottombar 属性正常工作。两种方式都可以单独工作。

Answer 1

 propertyA: function() {
   return this.get("propertyB.someObject.someValue");
 }.property("propertyB").volatile()

http://emberjs.com/api/classes/Ember.ComputedProperty.html#method_volatile