仍在尝试找到Aurelia JS - Making a synchronous HTTP request, to change data before page load?的答案 - 所以我已将其简化为以下问题。
假设我们使用联系人管理员教程：
...其代码也复制在https://gist.run/?id=c73b047c8184c052b4c61c69febb33d8 ...
上现在，这就是我阅读代码的方式：在contact-list.js constructor() ContactList课程中，我们有：
export class ContactList {
static inject = [WebAPI, EventAggregator];
constructor(api, ea){
this.api = api;
this.contacts = [];
...
...所以在构造函数中，this.contacts类的ContactList被初始化为一个空数组。
然后，在同一个ContactList类中，有一个created()方法：
created(){
this.api.getContactList().then(contacts => this.contacts = contacts);
}
这将检索web-api.js中定义的联系人列表，并将其分配给之前为空的类ContactList属性this.contacts。
最后，在contact-list.html中，我们有：
<li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
...
...显然迭代了this.contacts类的ContactList，并基于此在HTML GUI中生成<li>（和其他）元素。
因此，据我所知，这个想法是每当this.contacts类的ContactList属性发生变化时，<li repeat.for="contact of contacts" ...应该再次执行，并根据需要显示更新的GUI与数据。
然而，我无法证明这一点。我认为最简单的方法是在created() ContactList方法运行后几秒钟执行一个函数，所以我尝试使用setTimeout：
created(){
this.api.getContactList().then(contacts => this.contacts = contacts);
setTimeout(this.changeContactList, 3000); // call changeContactList() function after 3 seconds
}
...我添加了一个changeContactList方法：
changeContactList() {
this.contacts = [ {
id:13,
firstName:'Bob',
lastName:'Rock',
email:'bob@rock.com',
phoneNumber:'888-7303'
}
];
alert("changeContactList done " + this.contacts.length);
}
因此，它只是将this.contacts类的ContactList简单分配给新数据数组。
所以，为此，我确实在几秒钟之后得到一个警报窗口;它确实说“changeContactList done 1”意味着this.contacts数组确实已经更改为新数据 - 除了GUI中没有任何变化？！
那么我做错了什么？我是否应该调用一个额外的函数来更新状态渲染？但是，如果我必须调用一个额外的函数，那么绑定点是什么？换句话说 - 我需要做什么才能让GUI更新并显示this.contacts数组新更改的状态？
答案 0 :(得分：0)
好的，发现问题所在 - 上面代码的问题是当您使用this时setTimeout的含义发生了变化 - 在这种情况下，this成为对Window的引用contact-list.js，而不是定义类的实例！ （其余的装订显然有效，因为我之前已经理解过）
考虑到这一点，我终于得到了GUI来显示更新的数据数组，并在 created(){
this.api.getContactList().then(contacts => { this.contacts = contacts ;
//setTimeout(this.changeContactList, 1000); // timeout delay ok, but 'this' becomes Window
//setTimeout(this.changeContactList(this), 1000); // timeout delay not honored here
//setTimeout(function() {console.log(this); this.changeContactList(this);}, 1000); // "this.changeContactList is not a function"; 'this' is Window
// works OK:
//var copythis = this; // make a copy of 'this', since 'this' looses meaning in the setTimeout
//setTimeout(function() {console.log(copythis); copythis.changeContactList();}, 1000); //
});
console.log(this.contacts); // is empty [] here - Promise unresolved yet
// also works OK:
var copythis = this; // make a copy of 'this', since 'this' looses meaning in the setTimeout
setTimeout(function() {console.log(copythis); copythis.changeContactList();}, 2000); //
}
changeContactList() {
//this.contacts = [ {
// id:13,
// firstName:'Bob',
// lastName:'Rock',
// email:'bob@rock.com',
// phoneNumber:'888-7303'
//}
//];
// "this" is Window here, if called from setTimeout(this.changeContactList,
// but if called as setTimeout(this.changeContactList(this), then "this" is ContactList! - but then timeout delay is not honoured
console.log(this);
console.log(this.contacts);
this.contacts.push({
id:13,
firstName:'Bob',
lastName:'Rock',
email:'bob@rock.com',
phoneNumber:'888-7303'
});
alert("changeContactList done " + this.contacts.length);
}
中进行了以下更改：
{{1}}