利用 "computed properties aren't computed unless something tries to get them"

Harnessing "computed properties aren't computed unless something tries to get them"

我正在通过 ember-cli 学习 Ember。我有一个问题,我认为它与“计算属性不计算,除非有东西试图获得它们”,但我不知道如何“” get" 在本例中为 属性。我使用 ember-cli:

创建了一个应用程序、一个控制器、一项服务和一个模板
ember new st
cd st/
ember g controller index
ember g service start
ember g template index

控制器:

import Ember from 'ember';

export default Ember.Controller.extend({
  start: Ember.inject.service(),
  value: Ember.computed('start', function () { 
    return this.get('start').value;
  }),
  actions: {
    update: function() {
      this.get('start').update();
      alert(this.get('start').value);
  }
 }
});

服务:

import Ember from 'ember';

export default Ember.Service.extend({
  value: "original",
  update: function() {
    this.set('value', "updated");
  }
});

模板:

<p>{{value}}</p>
<br>
<button {{action "update"}}>Update</button><br>

然后我用 "ember serve" 上菜。正如预期的那样,显示的值是初始值 "original"。当我单击“更新”按钮时,我收到一条显示新值 "updated" 的警报,但原始值仍保留在屏幕上。我怎样才能“get”这个注入属性以便计算并因此更新?

ember-cli是1.13.8,ember本身是2.0.1

您声称依赖 start 属性,但 start 属性 本身并没有改变,value 属性 上 start 是。您应该将其更改为依赖于 start 上的 属性 value。此外,可以在 get 函数中获取更深层次的属性。

export default Ember.Controller.extend({
  start: Ember.inject.service(),
  value: Ember.computed('start.value', function () { 
    return this.get('start.value');
  }),
  actions: {
    update: function() {
      this.get('start').update();
      alert(this.get('start.value'));
  }
 }
});

对于踢球和咯咯笑,这可以用两种方式写得更简单。

使用别名:

export default Ember.Controller.extend({
  start: Ember.inject.service(),
  value: Ember.computed.alias('start.value'),
  actions: {
    update: function() {
      this.get('start').update();
      alert(this.get('start.value'));
    }
  }
});

只需在模板中引用即可

export default Ember.Controller.extend({
  start: Ember.inject.service(),
  actions: {
    update: function() {
      this.get('start').update();
      alert(this.get('start.value'));
  }
 }
});

<p>{{start.value}}</p>
<br>
<button {{action "update"}}>Update</button><br>