Question

我无法在我的测试应用中使以下代码正常工作：

this.propertyWillChange('tableContent');
this.get('tableContent').sort(function (a, b) {
     var nameA = a.artikel_name,
     nameB = b.artikel_name;
     if (nameA < nameB) {
        return -1;
     }
     if (nameA > nameB) {
        return 1;
      }
      return 0 //default return value (no sorting)
  });
 this.propertyDidChange('tableContent');

数据已排序，但dom未更新。

模板如下所示：

<tbody>
    {{#each NewApp.router.gridController.tableContent}}
        {{#view NewApp.TableRow rowBinding="this"}}
            <td style="width: 100px">{{view.row.product_no}}</td>
            <td align="right" style="width: 100px">{{view.row.price}}</td>
            <td>{{view.row.artikel_name}}</td>
        {{/view}}
    {{/each}}
</tbody>

我尝试使用简短的jsfiddle代码片段重现此问题。但它有效。唯一的区别是，我使用ajax调用（以及一些额外的路由器设置）来获取数据。

selectionChanged: function () {
   var that = this;
   if (this.selection) {
    $.getJSON("api/v1/lists/" + this.selection.id + "/prices", function (content) {
        that.set('tableContent', content);
    });
}
}.observes('selection')

如果我复制数组并重新分配复制的数组，则相同的代码可用。

Answer 1

您是否尝试使用内置的SortableMixin？如果没有，这对你有好处吗？

JavaScript的：

App = Ember.Application.create();

App.activities = Ember.ArrayController.create({
  content: [{name: 'sleeping'}, {name: 'eating pizza'},
            {name: 'programming'}, {name: 'looking at lolcats'}],
  sortProperties: ['name']
});

App.ActivityView = Ember.View.extend({
  tagName: "li",
  template: Ember.Handlebars.compile("{{content}}")
});

App.SortButton = Ember.View.extend({
  tagName: "button",
  template: Ember.Handlebars.compile("Sort"),
  click: function() {
    App.activities.toggleProperty('sortAscending');
  }
});

jsfiddle：http://jsfiddle.net/Sly7/cd24n/#base

对数组进行排序不会更新Dom

1 个答案: