Ember 数组：“removeObject”上没有渲染答案

【问题标题】：Ember array: no render on `removeObject`Ember 数组：“removeObject”上没有渲染
【发布时间】：2014-10-17 11:28:52
【问题描述】：

我有一个这样创建的Ember.ArrayProxy：

Em.ArrayProxy.createWithMixins(Em.Array, Em.MutableArray, Em.SortableMixin, {
  content         : Em.A(arr),
  sortProperties  : properties,
  sortAscending   : fn ? fn : void(0)
}).reopen({
  isEmpty: function(){
    return this.get('length') < 1;
  }
});

当我在数组上使用pushObject 或sortBy 时，数据绑定工作得很好。但是当我在这个数组上使用removeObject 时，我在 html 中没有更新。我该如何解决？

我的余烬：

DEBUG: -------------------------------
DEBUG: Ember      : 1.7.1+pre.c1ec09ad
DEBUG: Ember Data : 1.0.0-beta.9
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery     : 2.0.3
DEBUG: -------------------------------

UPD：

从列表中删除对象时，我注意到非常奇怪的行为：

templates/order/list.handlebars中有我的简化模板：

<ul class="scrollable_list">
  {{#each group in orders}}
    <li class="group">
      <div class="group_title">
        Orders at {{format_date group.date f="DD.MM.YYYY"}}
        <div class="label">{{group.count}}</div>
      </div>
    </li>
    <ul>
    {{#each order in group.orders}}
      <li {{bind-attr class=':order order.is_mine order.is_claimed'}}>
        {{#link-to 'orders.group.show' controller.group order}}
          {{partial 'order/item'}}
        {{/link-to}}
      </li>
    {{/each}}
    </ul>
  {{/each}}
</ul>

对象orders 是Ember.Object 的ArrayProxy。数组由this.create_sortable_array 创建。数组中的每个对象都有这样的结构：

Em.Object.create({
  date    : date,
  time    : date.getTime(),
  orders  : this.create_orders_array()
})

属性orders 也是ArrayProxy。每个项目都是DS.Model 实例。

方法：

this.create_orders_array：

create_orders_array: function(){
  return this.create_sortable_array([], ['id'], true, function(a, b){
    a = Number(a);
    b = Number(b);
    return a > b ? 1 : -1
  });
}

this.create_sortable_array：

create_sortable_array: function(arr, properties, desc, fn){
  desc = (typeof desc == 'undefined' || desc == null) ? false : desc;
  fn   = fn || void(0);
  return Em.ArrayProxy.createWithMixins(
    Em.MutableArray,
    Em.MutableEnumerable,
    Em.SortableMixin, {
      content         : Em.A(arr),
      sortProperties  : properties,
      sortAscending   : fn ? fn : void(0)
    }).reopen({
      isEmpty: function(){ return this.get('length') < 1 }
    });
}

模板会被路由器渲染到{{outlet orders}}：

App.OrdersRoute = App.AppRoute.extend({
  renderTemplate: function(){
    this._super()
    this.render('order/list', into: 'orders', controller: 'orders')
    this.render({'order/show', into: 'orders', outlet: 'main_view'})
    this.render('order/smart_search', into: 'application', outlet: 'smart_search', controller: 'orders')
  }
});

【问题讨论】：

标签： javascript data-binding ember.js

【解决方案1】：

它看起来对我来说工作正常。您可能根本没有从列表中删除该项目。

var arr = [{a:'saf'},{a:'fdsa'},{a:'asd'}];
var foo = Em.ArrayProxy.createWithMixins(Em.Array, Em.MutableArray, Em.SortableMixin, {
  content         : arr,
  sortProperties  : ['a'],
  sortAscending   : true
}).reopen({
  isEmpty: function(){
    return this.get('length') < 1;
  }
});


App.IndexRoute = Ember.Route.extend({
  model: function() {
    Em.run.later(function(){
      foo.removeObject(foo.objectAt(1));
    },2000);
    return foo;
  }
});

http://emberjs.jsbin.com/bufoca/1/edit

【讨论】：

感谢您的示例。我正在用我的数组做完全相同的事情。看起来我的应用程序结构以某种方式影响了ArrayProxy 的行为。
可以添加模板吗？
我很好奇是不是你的 UL 在 LI 之外
不。检查了这个，没有效果。
为什么removeObject后面的数组中有undefined项？（见有问题的截图）

【解决方案2】：

问题在于第三方库将Array.prototype 的removeAt 方法替换为它自己的方法。因此，如果 Ember 从数组中删除元素，它会使用它自己的 removeAt 替换为另一个元素。在这种情况下，一些 Ember 钩子没有被调用，突变机制无法检测到任何变化。感谢大家的帮助和建议。

【讨论】：