ember.js - Ember js @each 深一层，但我有两层深的关系

Question

这个问题在这里已经有了答案:





Ember.js 2.3 implement @each.property observer on a HasMany relationship?

(2 个回答)


6年前关闭。




我必须访问 Controller 上两层深的属性，但是 []只能通过 emberjs 指南访问一级深度。

model(params) {
    params.paramMapping = {
        page: "page",
        perPage: "per_page",
        total_pages: "pages"
    };

    return this.findPaged('contractf', params);
},

setupController(controller, model) {
    model.forEach(function(item) {
        item.set('sale_price', item.get('dealers_sched_id.sale_price'));
    });

    controller.set('content', model);
},

上面，我的模型基本上是在 contractf 模型中以分页格式获取所有记录。然后我设置我的 Controller 并遍历所有这些模型并绑定(bind)一个 sale_price进入它的关系以在正确的模型关系中获得 sale_price 的属性。

现在在我的模板中，我有这个:

new_suggested_price: Ember.computed('selectedItems', 'selectedItems.[].sale_price', function() {
    var ret = 0;

    this.get('selectedItems').filterBy('car_used', 'N').forEach(function(contract){
        var salePrice = contract.get('sale_price');

        if (salePrice) {
            ret += (salePrice*100);
        }
    });

    return ret/100; // We *100/100, so we avoid a floating point calc error.
}),

基本上只是给了我一个易于格式化的数字。如您所见，它取决于 selectedItems (基本上是模型，但按属性过滤)。所以我必须进入每个模型项目并找到 sale_price我设置了我的属性，如果它发生变化，这个计算的属性将更新。阅读 Ember 的指南，我做不到 selectedItems.[].dealers_sched_id.sale_price因为它只深入一层。

我认为在 setupController 上设置一个属性可以解决这个问题，但似乎没有，因为我仍然得到 NaN作为 sale_price值(value)。

现在，如果我将 setTimeout 函数设置为 500 毫秒，它会很好地填充。我如何在页面加载时定义它？

感谢您的任何帮助。

Answer 1

为什么会存在这个问题

Ember API 确实允许您只使用一级 @each/[]在您的计算属性依赖项中。

此限制可能是人为的，因为使用了两个或更多 @each级别是对内部观察者维护的巨大性能影响。

因此，您必须避免使用多个 @each/[]在您的 CP 依赖链中。

如果你不能用 N 根蜡烛做蛋糕，那就做 N 个蛋糕，每人一根蜡烛

但有时您的业务要求您必须达到或更高级别。

不要害怕!这可以通过一系列计算属性来实现，其中每个属性只有一个 @each等级。

比如说，你有 Foo、Bar 和 Baz 模型并且想要依赖

foos.@each.bars.@each.bazes.@each.name

这是您需要创建的计算属性链:

barsArrays: computed('foos.@each.bars') -- map foos通过 bars .您将拥有一系列条形图。

bars: computed('barsArrays.[]') -- 将其展平以接收一系列条形图。

bazesArrays: computed('bars.@each.bazes') -- map bars通过 bazes .

bazes: computed('bazesArrays.[]') -- 展平 bazesArrays .

bazesNames: computed('bazes.@each.name') -- map bazes通过 name .

如何让链条变短

请注意，您可以根据 bar.bazes 的事实来缩短此链(但不一定性能更高)。是一个关系数组，它永远不会被不同的数组替换(只是它的内容发生了变化，但数组对象保持不变)。

bazesArrays: computed('foos.@each.bars') -- map foos通过 bars ，展平，然后按 bazes 映射.您将拥有一系列 baze。

bazes: computed('bazesArrays.[]') -- 展平 bazesArrays .

bazesNames: computed('bazes.@each.name') -- map bazes通过 name .

这是一个工作演示: http://emberjs.jsbin.com/velayu/4/edit?html,js,output