[英]Why Don't I have 'this' context inside of a .then() in my Ember component
I'm fairly new to Ember. 我是Ember的新手。
This is the code for my component: 这是我的组件的代码:
import Ember from 'ember';
export default Ember.Component.extend({
profiles: Ember.inject.service(),
tagName: 'td',
classNames: ['grey'],
classNameBindings: ['unreadMessages'],
unreadMessages: null,
onInit: function() {
const id = this.get('conversation.id');
return this.get('profiles').getMessages(id)
.then(function(bool) {
this.set('unreadMessage', bool);
});
}.on('init')
});
This throws: 这引发:
TypeError: Cannot read property 'set' of undefined
So I can gather that I don't have the this
context that I need to call this.set
inside of the .then()
所以,我可以收集,我没有
this
情况下,我需要调用this.set
的内部.then()
I need to assign the result of return this.get('profiles').getMessages(id)
to the unreadMessages
property in my component. 我需要将
return this.get('profiles').getMessages(id)
的结果分配给组件中的unreadMessages
属性。 So that I can use it for the classNameBinding
. 这样我就可以将它用于
classNameBinding
。
Here is the method I'm calling from the service 这是我从服务中调用的方法
getMessages(id){
return this.get('ajax').request('/messages?id=' + id)
.then((obj) => {
const unreadMessages = obj.messages.filter((e) => e.read === false);
if (unreadMessages === []) {
return false;
} else {
return true;
}
});
}
I've only been able to access the boolean value that getMessages returns inside of its .then()
and I am not able to call this.set()
inside of the .then()
I'm looking for a work around. 我只能够访问布尔值,它的getMessages内返回
.then()
我不能够调用this.set()
的内侧.then()
我正在寻找一个解决办法。 I think I'm close and am struggling to due to my lack of experience with Ember. 由于缺乏对Ember的经验,我认为自己已经接近并在努力。
getMessages
makes a 'GET'
request to my back end and filters through the messages to check if there are any that are unread and then returns true or false. getMessages
向我的后端发出'GET'
请求,并过滤消息以检查是否有未读的消息,然后返回true或false。 The purpose of the classNameBinding
is to notify the user of whether they have any unread messages for that thread. classNameBinding
的目的是通知用户该线程是否有未读消息。 This is a very simple email style messaging app that I am building for practice. 这是我为练习而构建的非常简单的电子邮件样式消息传递应用程序。
Thanks! 谢谢!
Change 更改
onInit: function() {
const id = this.get('conversation.id');
return this.get('profiles').getMessages(id)
.then(function(bool) {
this.set('unreadMessage', bool);
});
}.on('init')
});
to 至
onInit: function() {
const id = this.get('conversation.id');
return this.get('profiles').getMessages(id)
.then((bool) => {
this.set('unreadMessage', bool);
});
}.on('init')
});
The thing here is, the scope changes when you write function(){}
inside then and this
won't refer to the component this. 事情是,当您在其中写入
function(){}
时,范围会发生变化,而this
将不会引用此组件。 That's why in ES6 the concept of lexical this
was introduced. 这就是为什么在ES6的词汇概念
this
被引入。 This will retain the this
. 这将保留
this
。 So use Arrow function instead and it'll work smoothly.. 因此,请改用Arrow函数,它将正常运行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.