Javascript Aurelia-如何更改绑定变量，从而更改GUI？

仍然在努力寻找答案，所以我把它简化为以下问题

假设我们使用联系人管理器教程：

。。。其代码也被复制到

现在，我是这样读代码的：在

contact list.js

中，在

ContactList

类的

constructor（）

中，我们有：

export class ContactList {
  static inject = [WebAPI, EventAggregator];

  constructor(api, ea){
    this.api = api;
    this.contacts = [];
...

  <li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
  ...

。。。因此在构造函数中，

ContactList

类的

this.contacts

被初始化为空数组

然后，在相同的

ContactList

类中，有一个

created（）

方法：

created(){
  this.api.getContactList().then(contacts => this.contacts = contacts);
}

这将检索

web api.js

中定义的联系人列表，并将其分配给类

ContactList

属性

This.contacts

，该属性以前为空

最后，在

联系人列表.html

中，我们有：

export class ContactList {
  static inject = [WebAPI, EventAggregator];

  constructor(api, ea){
    this.api = api;
    this.contacts = [];
...

  <li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
  ...

。。。我添加了一个

更改联系人列表

方法，即：

  changeContactList() {
    this.contacts = [  {
      id:13,
      firstName:'Bob',
      lastName:'Rock',
      email:'bob@rock.com',
      phoneNumber:'888-7303'
    }
    ];
    alert("changeContactList done " + this.contacts.length);
  }

因此，它只是将

ContactList

类的

this.contacts

简单地分配给一个新的数据数组

因此，对于这一点，我确实会在几秒钟后得到一个警报窗口；它确实会说“

changecontlist done 1

”，这意味着

this.contacts

数组确实已更改为新数据-除了GUI中没有任何更改

---

那么我做错了什么？我应该调用一个附加函数来呈现更新的状态吗？但是如果我必须调用一个附加函数，那么绑定的意义是什么呢？换句话说-我必须做什么，才能让GUI更新并显示新更改的

this.contacts

数组的状态？

好的，找到问题所在-上面代码的问题是

this

的含义在使用

setTimeout

时会发生变化-在这种情况下，

此

将成为对

窗口的引用，而不是对定义类的实例的引用！（其余的装订显然和我之前理解的一样有效）

考虑到这一点，我最终让GUI显示更新的数据数组，并在
contact list.js中进行了以下更改：

created（）{
this.api.getContactList（）.then（contacts=>{this.contacts=contacts；
//setTimeout（this.changeContactList，1000）；//超时延迟正常，但“this”变为窗口
//setTimeout（this.changeContactList（this），1000）；//这里不接受超时延迟
//setTimeout（function（）{console.log（this）；this.changecontlist（this）；}，1000）；/“this.changecontlist不是函数”；“this”是窗口
//工作正常：
//var copythis=this；//复制“this”，因为“this”在setTimeout中失去了意义
//setTimeout（函数（）{console.log（copythis）；copythis.changeContactList（）；}，1000）；//
});
console.log（this.contacts）；//此处为空[]-承诺尚未解决
//也可以正常工作：
var copythis=this；//复制“this”，因为“this”在setTimeout中失去了意义
setTimeout（函数（）{console.log（copythis）；copythis.changeContactList（）；}，2000）；//
}
更改联系人列表（）{
//this.contacts=[{
//id:13，
//名字：'鲍勃'，
//姓氏：'摇滚'，
//电邮:'bob@rock.com',
//电话号码：“888-7303”
//}
//];
//“this”是此处的窗口，如果从setTimeout调用（this.changeContactList，
//但是如果被称为setTimeout（this.changeContactList（this）），那么“this”就是ContactList！-但是超时延迟是不受尊重的
console.log（this）；
console.log（this.contacts）；
这是我的名片({
id:13，
名字：'鲍勃'，
姓氏：'摇滚'，
电邮:'bob@rock.com',
电话号码：“888-7303”
});
警报（“更改联系人列表完成”+this.contacts.length）；
}