Ember.js Computed属性在排序后不会更新hasMany项

时间:2014-12-11 10:30:23

标签: javascript ember.js

我有以下设置按日期显示我的订单: orders by day

我有以下模板显示给定周的每个订单:(为了简洁,我删除了一些HTML)

模板

{{#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}

计算属性

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

它的作用是,它创建一个像这样的对象数组:

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

我现在正在努力工作几个小时,并且无法理解它以使其发挥作用。我的直觉说它与承诺有关吗?但是在"orders: []"数组中是真正的Ember对象,所以我认为它应该起作用。

我希望有人能指出我正确的方向。

非常感谢你们!

编辑:100%明确:我的订单模型仅包含订单。我自己创建了那个自定义对象。这就是为什么我认为数据绑定会被破坏的原因。

2 个答案:

答案 0 :(得分:5)

问题是您的模板仅在ordersByDateOfWeek更新时自行更新。只要其任何受监视的属性发生更改('model', 'sortProperties', 'sortAscending'),就会发生这种情况。当您自己构建订单对象时,引擎盖下的ember将根据需要添加它们,但它们不会导致ordersByDateOfWeek更新,因此您的模板将无法识别更改。

最简单的解决方案是使用实际属性(即您的订单模型)并将其添加到'model.@each.orders'ordersByDateOfWeek的监视列表。如果您需要额外的字段,例如date,请在模型上将它们创建为计算属性,如下所示:

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

你应该很少需要手工创建对象。

答案 1 :(得分:2)

计算属性不是魔术;-)它们很棒,但不是魔术。

我怀疑,由于您正在侦听'model'的更改,因此当您更改嵌套在此对象中的属性时,它不会触发更新。只有在对象引用'model'发生更改时才会重新评估您的属性。

在这种情况下,如果您实际为对象分配了一个新数组,则至少需要'model.@each.orders'。如果您稍后通过添加更多对象来更改阵列,则需要两步解决方案。如果是这种情况,请写下评论,我会扩展我的答案。

阅读:http://emberjs.com/guides/object-model/computed-properties-and-aggregate-data/