Question

为什么组件中的计算属性不能识别视图中的依赖关系，但是会将更改识别为观察者？

我尝试了两种不同的方法。第一个是依赖于外部变量（projectId）的计算属性，它只在某些时候识别出这种变化。另一个是观察者，有时会在计算属性的同时识别出变化，但在计算属性没有时也会识别出变化。例如，它在插入元素时识别属性和观察者，仅在同一路径内的页面转换上识别观察者，并且仅在页面转换到不同路径时识别该属性。这是为什么？根据我的理解，对计算属性的依赖集与观察者类似，那么它为什么会有问题呢？

这是使用计算属性的组件：

import Ember from "ember";

export default Ember.Component.extend({
  isFavorite: function() {
    console.log("property");
    // returns true or false
  }.property("favorites", "projectId")
});

这是具有观察者的组件：

import Ember from "ember";

export default Ember.Component.extend({
  isFavorite: null,

  observesFavorite: function() {
    console.log("observer");
    // sets isFavorite to true or false
  }.observes("favorites", "projectId")
});

为什么这两种方式不同？我怎样才能让组件始终识别favoriteId的变化？

修改

为了澄清，当组件仅存在于项目索引页面时，该组件仅使用计算属性：

// app/templates/projects/index.hbs
<table>
  {{#each sortedContent}}
    <tr>
      <td class="text-center">{{favorite-star action="updateFavorites" projectIdBinding="id" favoritesBinding="userFavorites"}}</td>
      <td>{{name}}</td>
    </tr>
  {{/each}}
</table>

然而，当我将它添加到项目展示页面时它停止了工作：

// app/templates/project/index.hbs
{{favorite-star action="updateFavorites" projectIdBinding="id" favoritesBinding="userFavorites"}} {{name}}

那时我尝试使用observer而不是compute属性来设置isFavorite属性。但是，当我尝试这样做时，它停止在项目索引页面上工作。现在，它只有当我两者观察者和计算属性时才有效，我知道这是创建它的错误方法。

我对该组件的唯一代码位于app/components文件夹中。它在app/templates/components中没有模板，它工作得很好，直到我不得不将它添加到show模板中。

为什么会这样？为什么计算属性只适用于项目索引，观察者只能处理项目show？

再次编辑

我创建了两个显示问题的JSBins。他们很乱，但他们为此目的而工作。 This是使用计算属性更新组件和收藏夹数组的示例。它在索引页面上正常工作，但在用户尝试在节目页面上收藏或不喜欢它时会中断。 This是否使用观察者，并且在节目页面上工作正常，但在索引上没有。

属性和观察者之间的区别？

0 个答案: