【问题标题】:Ember.js Computed property does not update hasMany item after sortingEmber.js 计算属性在排序后不更新 hasMany 项
【发布时间】:2015-02-09 19:20:57
【问题描述】:

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

我有以下模板,显示给定一周的每个订单:(为简洁起见,我删除了一些 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% 明确:我的订单模型仅包含订单。那个自定义对象是我自己创建的。这就是我认为数据绑定被破坏的原因。

【问题讨论】:

  • 你签出Ember.computed.sort了吗?还有一个标准属性arrangedContent,如果你正在寻找那种东西,它会被用作排序的结果。
  • 您好,我来晚了,谢谢您的回答!但是我看不出这将如何工作,因为arrangedContent 也用于我已经使用的sortProperties。请参阅:emberjs.com/api/classes/… 我是否必须编写自己的 arrangedContent 并使用我自己的排序构建?如果您在答案中提供一个工作示例,我会接受它。
  • 经过几天的摆弄,我对它做了赏金。我无法到达我想要的地方,因为安排好的内容不可能在原始项目之前有一个日期。
  • @DelphiLynx 能否请您分享您的小提琴,以便我们与基地合作?
  • 一个 jsbin/jsfiddle 肯定会有帮助...

标签: javascript ember.js


【解决方案1】:

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

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

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

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

【讨论】:

  • 感谢您的完整回答。有点晚了,但是我上次没有参加这个项目。你的回答成功了,我编辑了计算属性的观察列表,并添加了model.@each。 (在我的情况下,订单不是很多)
【解决方案2】:

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

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

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

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

【讨论】:

  • 我必须补充一点,我的模型仅包含订单。我放在前面的自定义日期是我自己的实现,用于显示图像中的数据。 (我也会将此信息添加到问题中)
猜你喜欢
  • 1970-01-01
  • 2015-08-21
  • 2020-12-10
  • 2013-06-29
  • 2019-06-18
  • 2015-09-04
  • 2017-12-18
  • 2013-11-29
  • 1970-01-01
相关资源
最近更新 更多