Aurelia - バウンド変数を変更する方法、GUIが変わる？

Question

Aurelia JS - Making a synchronous HTTP request, to change data before page load?への回答をまだ見つけようとしていますので、私はそれを次の質問に還元しました。

のは、我々は、コンタクトマネージャーのチュートリアルで作業しましょう：

• http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1

...そのコードも今https://gist.run/?id=c73b047c8184c052b4c61c69febb33d8 ...

にコピーされ、これは私が読んでどのようにありますコード：contact-list.jsのconstructor()のContactListクラスでは、私たちは：

...コンストラクタでは、ContactListクラスのthis.contactsが空の配列に初期化されます。

そして、同じ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' : ''}"> 
    ... 

が...これは明らかにクラスContactListのthis.contactsを反復処理し、それに基づいてHTMLのGUIで<li>（およびその他）の要素になります。

ContactListクラスのthis.contactsプロパティが変更されるたびに、<li repeat.for="contact of contacts" ...が再度実行され、データに従って更新されたGUIが表示されるという考えがあります。

しかし、私はこれを実証することができません。最も簡単には、私が考えた、ContactListのcreated()方法が実行された後に関数が数秒を実行持っているだろうので、私はそのための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); 
    } 

だから、それは新しいデータ配列にContactListクラスのthis.contactsの単純な割り当てです。

だから、私は実際に数秒後に警告ウィンドウを表示します。 this.contacts配列が実際に新しいデータに変更されたことを意味する "changeContactList done 1"と表示されますが、GUIに変更はありません。

どうしたのですか？私は、更新された状態をレンダリングするために追加の関数を呼び出すはずですか？しかし、追加機能を呼び出さなければならない場合、バインディングのポイントは何ですか？つまり、GUIを更新して、this.contacts配列の新しく変更された状態を表示するには、何をしなければなりませんか？

Answer 1

OK]をクリックして、見つかった問題が何であるか - その場合には、thisはない定義クラスのインスタンスに、Windowに基準となる - コードの問題は、上記のthis変化の意味あなたがsetTimeoutを使用するということです！

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); 
    } 

：念頭に置いて

（私は以前にそれを理解していたとして、結合の残りの部分は明らかに動作します）、私は最終的にcontact-list.jsを次のように変更して更新されたデータ列を表示するGUIを得ました