How Ember determines that model has changed?

Ember Data
1

In my Ember app I have a page with the list of posts. This posts come from API. Here is my model.

import Ember from 'ember';

export default Ember.Route.extend({
  queryParams: {
    order: {
      refreshModel: true
    }
  },

  model(params) {
    return this.store.query('design', params);
  }
});

I want to sort post on API, so I add query parameter order to my request. API responds with the same posts but in different order. Here are my requests.

GET http://localhost:3000/api/v1/posts?order=title-desc

{
	"data": [{
		"id": "247",
		"type": "posts",
		"attributes": {
			"title": "Randy McCullough",
			"created-at": "2015-11-13T09:43:56.147Z"
		}
	}, {
		"id": "248",
		"type": "posts",
		"attributes": {
			"title": "Pablo Carter"
			"created-at": "2015-11-13T09:43:56.248Z"
		}
	}
	}]
}

GET http://localhost:3000/api/v1/posts?order=title-asc

{
	"data": [
       {
		"id": "248",
		"type": "posts",
		"attributes": {
			"title": "Pablo Carter"
			"created-at": "2015-11-13T09:43:56.248Z"
		}
	},
       {
		"id": "247",
		"type": "posts",
		"attributes": {
			"title": "Randy McCullough",
			"created-at": "2015-11-13T09:43:56.147Z"
		}
	}, 
	}]
}

Here is my template.

{{#each posts as |post|}}
  {{post-thumbnail post}}
{{else}}
  No posts was found.
{{/each}}

Problem is that template doesn’t re-render after sorting. I think Ember doesn’t account order of elements in response and consider that responses as identical.

May be the whole way of sorting I use is wrong? What is the best practice of sorting in Ember?

2

try use “key” for each block.

{{#each key="id" posts as |post|}}
  {{post-thumbnail post}}
{{/each}}
3

I tried but with no success.

1365×537 90.7 KB

4

sorry the syntax is incorect :sweat:

{{#each posts key="id" as |post|}}
  {{post-thumbnail post}}
{{/each}}

If you just want sort it, you can sort the model on ember, via ember.computed.sort

5

It works. Actually, it turned out that it worked before. I use masonry plugin and problem was in it :sweat_smile:. Masonry doesn’t rerender layout after dom changes. Anyway, thanks a lot :wink: