arrays - 重新排序用于创建 subview 的数组后，Ember View 未更新

Question

我有一个包含一系列事件的事件 View 。该数组有时会根据用户可以更新的计算属性(distanced_from_home)进行排序。当数组排序时，我希望根据新顺序重新渲染 subview 。这是我的模板和 View :

index.html

  <script type="text/x-handlebars" data-template-name="activities">
    <h1>Activities</h1>
    {{#each activities}}
      {{view App.ActivityView activityBinding="this"}}
    {{/each}}
  </script>

app.js

  App.ActivitiesView = Em.View.extend({
    templateName: 'activities',
    activities: (function() {
      var list;
      list = App.activityController.activities;
      console.log("Activities View");
      console.log(list);
      return list;
    }).property('App.activityController.activities', 'App.activityController.activities.@each.distance_to_home').cacheable()
  });

当我导致 distance_to_home 属性发生更改时，console.log 输出显示列表数组已正确排序，但 subview 不会按新顺序重新渲染。如果我离开此 View 然后返回到它(它再次呈现)，则会显示正确的顺序。

我应该怎样做才能让 View 自动更新？

谢谢

编辑

这似乎有效 here我的“事件”计算函数肯定会触发，但没有对 View 进行重新排序...我也尝试使用观察者，但结果是相同的。

  App.ActivitiesView = Em.View.extend({
    templateName: 'activities',
    classNames: ['activities rounded shadow'],
    homeBinding: 'App.user.home',
    activities: [],
    homeChanged: (function() {
      console.log("homeChanged()");
      this.set('activities', App.activityController.activities.sort(this.compare_activities));
      return null;
    }).observes('home'),

    compare_activities: function(a, b) {
      var result;
      result = 0;
      if (App.user.home != null) {
        result = a.get('distance_to_home') - b.get('distance_to_home');
      }
      return result;
    },

  });

我还尝试将“activities”参数设置为空数组，然后将其重置为有序数组以强制其重新渲染，但这没有效果。

  App.ActivitiesView = Em.View.extend({
    templateName: 'activities',
    classNames: ['activities rounded shadow'],
    homeBinding: 'App.user.home',
    activities: [],
    homeChanged: (function() {
      console.log("homeChanged()");
      this.set('activities', []);
      this.set('activities', App.activityController.activities.sort(this.compare_activities));
      return null;
    }).observes('home'),

    compare_activities: function(a, b) {
      var result;
      result = 0;
      if (App.user.home != null) {
        result = a.get('distance_to_home') - b.get('distance_to_home');
      }
      return result;
    },

  });

编辑(第二个)

看来使用 Ember.copy 最终解决了这个问题。将数组属性设置为空数组(或 null)没有任何效果。这是最终起作用的查看代码:

  App.ActivitiesView = Em.View.extend({
    templateName: 'activities',
    classNames: ['activities rounded shadow'],
    homeBinding: 'App.user.home',
    activities: [],
    homeChanged: (function() {
      var list;
      list = App.activityController.activities.sort(this.compare_activities);
      this.set('activities', Ember.copy(list), true);
      return null;
    }).observes('home'),
    compare_activities: function(a, b) {
      var result;
      result = 0;
      if (App.user.home != null) {
        result = a.get('distance_to_home') - b.get('distance_to_home');
      }
      return result;
    }
  });

Answer 1

这有帮助吗？ http://jsfiddle.net/rNzcy/

把这个简单的例子放在一起，我有点困惑为什么在对 ArrayController 中的内容数组进行排序时 View 更新不能“正常工作”。看来您可以做两件简单的事情来触发 View 更新。要么:

• 将内容数组设置为空，对原始内容进行排序，然后设置排序后的内容。

或

• 在排序时通过 Ember.copy() 克隆内容数组

我猜 Ember 会检测到何时设置一个全新的 Array 对象，并触发所有预期的绑定(bind)/ View 更新。否则，也许它正在执行某种缓存，并且如果 Array 对象没有更改(即它已就地排序)，则不会触发任何绑定(bind)？只是猜测。

更新:请参阅讨论@https://github.com/emberjs/ember.js/issues/575#issuecomment-4397658它使用 propertyWillChange() 和 propertyDidChange() (http://jsfiddle.net/rNzcy/4/) 改进了解决方法——应该比克隆大型数组更有效。