利用“除非有东西试图获取它们，否则不会计算计算的属性”

Posted 2023-02-23

【中文标题】利用“除非有东西试图获取它们，否则不会计算计算的属性”

【英文标题】：Harnessing "computed properties aren't computed unless something tries to get them"

【发布时间】：2015-11-21 08:39:46

【问题描述】：

我正在通过 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”来服务这个。正如预期的那样，显示的值是初始值“原始”。当我单击更新按钮时，我会收到一条警报，显示新值“已更新”，但原始值仍保留在屏幕上。如何“获取”这个注入的属性，以便计算并更新它？

ember-cli 是 1.13.8，ember 本身是 2.0.1

【参考方案1】：

您声称依赖于start 属性，但start 属性本身并没有改变，start 上的value 属性是。您应该将其更改为依赖于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>

【讨论】：

感谢@Kingpin2k，您的所有 3 个备选方案均有效（模板中的错字已从 service.value 更正为 start.value）。非常感谢。