利用 "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>
我正在通过 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>