Ember v2 如何处理依赖于控制器属性的嵌套模型和计算属性

Question

我正在使用 Ember/Ember-Data v.2.1.0 开发一个分析 web 应用程序，并且对这两个应用程序都是新的...

我的路由加载了一个模型“parent”，它与另一个模型“child”有一个 hasMany 关系，每个模型都与第三个模型“grandchild”有几个 belongsTo 关系。父母有十几个孩子并不罕见，每个孩子都有十几个孩子，每个孩子都显示在模板中并由面向数据的组件使用。

“孙子”的属性之一是带有键/值对的哈希。

ratings: DS.attr()

数据库中的哪个是...

{ 'r1': 10, 'r2': 30, 'r3': 35... }

'grandchild' 上的另一个属性是一个计算属性，它在哈希中返回一个特定值，第三个属性是做一些数学运算...

rating: Ember.computed('ratings', 'rSample', function() {
  return this.get(`ratings.${this.get('rSample')}`);
},
cost: DS.attr(number),
value: Ember.computed('rating', 'cost', function() {
 return this.get('rating') / this.get('cost');
}

这行得通；但是，我想要的是将“rSample”作为路由控制器上的一个值。

目标是在路由模板中有一个组件，允许用户设置“rSample”的值，这将在模板中显示并用于分析组件的所有“孙子”记录中保持一致。

由于这些计算属性都没有保存到数据库中，我不确定模型是否是这些计算属性的正确位置。让模型知道控制器似乎是一种反模式。

但我不知道如何在控制器上为孙子设置计算属性，因为路由正在加载“祖父母”模型。

我现在所做的是在模型中设置变量...

rSample: 'r50'

然后在控制器中设置一个观察者来观察变化和更新...

rSample: '50',
rSampleChanged: Ember.observer('rSample', 'players.[]', function() {
    this.get('players').forEach((player) => {
        player.set('rSample', `r${this.get('rSample')}`);
    });
})

但可能有更好的方法？

Answer 1

我将使用的方法是使用一个组件来处理用户对 rSample 值的更改，然后将这些更改传播到子组件。在子组件中，您可以执行与以前相同的计算操作。

对于父组件定义：

{{parent-component grandChildModels=grandChildModels}}

在父组件模板中：

{{input value=rSample}}

{{#each grandChildModel as |model|}}
  {{child-component rSample=rSample model=model}}
{{/each}}

然后在子组件中，您可以使用一些您正在使用的计算结果。

这种方法的缺点是父组件和子组件非常交织，非常不灵活。从好的方面来说，您可以轻松地将 rSample 值传递给子模型，而无需依赖观察者，也不会使用 rSample 逻辑污染控制器。