Ember.js Computed property does not update hasMany item after sorting

Question

I have the following setup for displaying my order by date:

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

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}

The 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 it does is, that it creates an array of objects like this:

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

I am trying for hours now, and cannot get my head around it to get it to work. My intuition says that it has to do with promises? But in the "orders: []" array are real Ember objects, so it should have to work I think.

I hope that someone can point me in the right direction.

Many thanks guys!

Edit: to be 100% clear: my order model consists solely of orders. That custom object do I create myself. Thats why the binding of data gets broken I think.

Answer 1

The problem is that your template only updates itself when ordersByDateOfWeek updates. Which happens whenever any of its watched properties changes ('model', 'sortProperties', 'sortAscending'). When you build order objects yourself, under the hood ember will add them as you want but they will not cause the ordersByDateOfWeek to update and hence your template will not recognise the change.

The easiest solution would be to work with actual properties, (i.e. your orders models) and add them with 'model.@each.orders' to ordersByDateOfWeeks watch list. If you need extra fields like date create them as computed properties on the model, like so:

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

You should rarely need to create objects by hand.

Answer 2

Computed properties are not magic ;-) They are great, but not magic.

I suspect that since you are listening on changes for 'model', it does not trigger the update when you change properties nested inside this object. Your property will only be re-evaluated when the object reference 'model' gets changed.

In this case you need at least 'model.@each.orders' if you actually assign a new Array to your objects. If you just change the array by adding more objects later on, you need a two step solution. If this is the case, write a comment and I will expand my answer.

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