javascript - Ember.js 计算属性在排序后不更新 hasMany 项目

Question

我有以下设置来按日期显示我的订单:

我有以下模板显示给定一周的每个订单:(为简洁起见，我删除了一些 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":[],
   },
]

我已经尝试了好几个小时了，但还是无法理解它是否能正常工作。我的直觉告诉我这与 promise 有关？但是在 "orders: []" 数组中是真正的 Ember 对象，所以我认为它应该可以工作。

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

非常感谢你们!

编辑:100% 清楚:我的订单模型仅由订单组成。我自己创建了那个自定义对象。我认为这就是数据绑定(bind)被破坏的原因。

Answer 1

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

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

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

您应该很少需要手动创建对象。