Sorting an array does not update the Dom

Question

I can not make the following code work in my test app:

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

The data gets sorted, but the dom is not updated.

The template looks like this:

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

I tried to reproduce this problem with a short jsfiddle snippet. But there it works. The only difference is, that I fetch the data using an ajax call (and some additional router setup).

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

The same code works if i copy the array and reassign the copied array.

Can you provide a JSFiddle? It's possible to simulate an AJAX call, so this case should be possible to demonstrate in a fiddle ... — pangratz
– pangratz, Commented Jul 18, 2012 at 19:15
JSFiddle - But I have no public available data to simulate the ajax call. — rogergl
– rogergl, Commented Jul 18, 2012 at 19:35

sly7_7 · Accepted Answer · 2012-07-18 19:56:19Z

1

Did you try to use the built-in SortableMixin ? If not, is this good for you ?

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

answered Jul 18, 2012 at 19:56

sly7_7

12k3 gold badges42 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sly7_7 Over a year ago

@MilkyWayJoe yep, but I will wait for rogergl to see if it works for his app :)

MilkyWayJoe Over a year ago

I don't know if this will work for his particular implementation since he's using a property to watch the changes in the collection, but that property is being changed to the same value 'newOrder' the button is clicked so it fires the sort method in the controller, but it never gets re-set, so it seems to me the sort method fires only once since the next time it changes the value of that property it will be the same value it had previously. Am I wrong? I think he should use your implementation, seems much cleaner and does the job

rogergl Over a year ago

Problem solved. #each NewApp.router.gridController.tableContent does not work and #each NewApp.router.gridController.content but #each NewApp.router.gridController does work.

rogergl Over a year ago

Since the last comment was not complete: Problem solved. #each NewApp.router.gridController.tableContent does not work and #each NewApp.router.gridController.content does not work but #each NewApp.router.gridController does work. @MilkyWayJoe I used .notifyPropertyChange to make the sort method repeatedly work. But toggleProperty is indeed much cleaner.

sly7_7 Over a year ago

And did you use the sortProperties property ? In other words did you try using the built-in sorting stuff in ArrayController instead of your's ?

Collectives™ on Stack Overflow

Sorting an array does not update the Dom

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related