Ember.js computed property does not update hasMany element after sorting

Question

I have the following setting to display my order by date:

I have the following template that shows each order for a given week: (I cut some html for short)

Template

{{#each ordersByDate in ordersByDateOfWeek}} <div class="orders-by-date"> <div> <span>{{order-date-formatted ordersByDate.date}}</span> </div> {{#each order in ordersByDate.orders}} {{order.number}} {{! updates correctly}} {{order.market.name}} {{! a hasmany property called here, does not update}} {{/each}} </div> {{/each} 

computed property :

 ordersByDateOfWeek: function () { var result = []; // return value var object = null var date = null; // add every order to an array with a date an order objects this.forEach(function (order) { // get the date of the order date = order.get('created'); // create a new object that holds the orders for a given date object = result.findProperty('date', date); // create the object if it does not exist if (!object) { object = { date: date, orders: [], // some more }; // add the object with the date to the result result.push(object); } // add the orders to the current object object.orders.push(order); // more calculations done here below }); }.property('model', 'sortProperties', 'sortAscending'), 

What he does is that he creates an array of such objects:

 [ { "date":"2014-12-08", "orders":[// order objects here], // some more properties }, { "date":"2014-11-08", "orders":[], }, { "date":"2014-10-08", "orders":[], }, ] 

I have been trying for several hours and cannot get around it to make it work. Does my intuition say this is related to promises? But there are real Ember objects in the "orders: []" array, so I have to work, I think.

I hope someone can point me in the right direction.

Thanks so much guys!

Edit: to be 100% clear: my order model consists solely of orders. I create this custom object myself. That's why data binding breaks, I think.

Answer 1

The problem is that your template is only updated when ordersByDateOfWeek updated. This happens when any of its observable properties changes ( 'model', 'sortProperties', 'sortAscending' ). When you create order objects yourself, under the hood, ember will add them the way you want, but they will not cause ordersByDateOfWeek to update ordersByDateOfWeek and therefore your template will not recognize the changes.

The easiest solution would be to work with the actual properties (for example, with your orders) and add them to the watchlist ' [e-mail] ' to ordersByDateOfWeek . If you need additional fields of type date , create them as calculated properties of the model, for example:

 date: Ember.computed.alias('created') 

You rarely need to create objects manually.

Answer 2

Computable properties are not magical ;-) They are great, but not magical.

I suspect that since you are listening for changes to 'model' , this does not cause an update when changing the properties nested inside this object. Your property will be re-evaluated only after changing the reference to the 'model' object.

In this case, you need at least ' [e-mail] ' if you really assign a new array to your objects. If you just modify the array by adding a few objects later, you will need a two-step solution. If so, write a comment and I will analyze my answer.

For reading: http://emberjs.com/guides/object-model/computed-properties-and-aggregate-data/