0

テストアプリで次のコードを機能させることができません:

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')

配列をコピーして、コピーした配列を再割り当てすると、同じコードが機能します。

4

1 に答える 1

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

于 2012-07-18T19:56:19.240 に答える