javascript - Ember.js Computed property does not update hasMany item after sorting - Stack Overflow

admin管理员组

文章数量:1415467

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

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

• javascript
• ember.js

Share Improve this question Follow edited Dec 19, 2014 at 8:58 DelphiLynx asked Dec 11, 2014 at 10:30 DelphiLynxDelphiLynx 92111 gold badge1616 silver badges4343 bronze badges 7

• Have you checked out Ember.puted.sort? Also there's a standard property arrangedContent that is used as the result of a sort if you're looking for that sort of thing. – aceofspades Commented Dec 12, 2014 at 1:11
• Hi, I am a bit late, but thanks for your answer! However I do not see how this will work because arrangedContent is also used for sortProperties which I already use. See: emberjs./api/classes/… Do I have to write my own arrangedContent with my own sorting build in? If you provide an working example in an answer I will accept it as such. – DelphiLynx Commented Dec 17, 2014 at 10:39
• After days of fiddling with it I do a bounty on it. I can't get where I want, because arranged content does not have the possibility to have a date before the original items. – DelphiLynx Commented Dec 19, 2014 at 8:19
• @DelphiLynx could you, please, share your fiddle so that we can work with a base ? – axelduch Commented Dec 19, 2014 at 9:11
• A jsbin/jsfiddle would definitely be helpful... – Kalman Commented Dec 19, 2014 at 14:08

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 5 +125

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 '[email protected]' to ordersByDateOfWeeks watch list. If you need extra fields like date create them as puted properties on the model, like so:

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

You should rarely need to create objects by hand.

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 '[email protected]' 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 ment and I will expand my answer.

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

本文标签： javascriptEmberjs Computed property does not update hasMany item after sortingStack Overflow