0
我还在试图寻找一个答案，Aurelia JS - Making a synchronous HTTP request, to change data before page load? - 所以我想在这个问题，https://gist.run/?id=90d98563621fe49c1dde6b4f2fc6961d代码示例如下。Aurelia - 从注入访问更新的类属性？
根据Aurelia - how to change bound variables, so the GUI changes?，我知道我可以更改一个类变量，它是HTML绑定的源，并且HTML/GUI应该更新。所以我想在上面的要点类似的东西 - 特别是，我试图改变ContactList类的contacts阵列属性（在contact-list.js）。
下面是相关变化app-clist.js：
import {WebAPI} from './web-api';
import {HttpClient} from 'aurelia-http-client';
import {ContactList} from './contact-list';
import {Container} from 'aurelia-dependency-injection';
// for multiline string, use backticks `` - ES6 template literals.
let phpcode = `
<?php
$outarr = array();
$tObj = new StdClass();
$tObj->{'id'} = '1';
$tObj->{'firstName'} = 'Bob';
$tObj->{'lastName'} = 'Glass';
$tObj->{'email'} = '[email protected]';
$tObj->{'phoneNumber'} = '243-6593';
array_push($outarr, $tObj);
$tObj = new StdClass();
$tObj->{'id'} = '2';
$tObj->{'firstName'} = 'Chad';
$tObj->{'lastName'} = 'Connor';
$tObj->{'email'} = '[email protected]';
$tObj->{'phoneNumber'} = '839-2946';
array_push($outarr, $tObj);
echo json_encode($outarr);
?>
`;
export class AppClist { // in gist example is wrong, still called App
static inject() { return [WebAPI, HttpClient, ContactList]; }
constructor(api, http, conlist){
this.api = api;
this.http = http;
this.conlist = conlist;
var phpcodesl = phpcode.replace(/(?:\r\n|\r|\n)/g, ' ');
var encphpcode = encodeURIComponent(phpcodesl); // urlencode
//alert(encphpcode);
// NOTE: gist.run due https will not allow loading from http
//this.http.post("https://phpfiddle.org/api/run/code/json", "code="+encphpcode)
//.then(response => {alert(response.response); console.log(response);}) // does not work
// this does work:
console.log("a1", this.conlist, this.conlist.contacts);
this.http.createRequest('https://phpfiddle.org/api/run/code/json')
.asPost()
.withHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8')
.withContent("code="+encphpcode)
.send()
.then(response => {
alert(response.response);
console.log(response);
var respobj = JSON.parse(response.response);
var respdataArr = JSON.parse(respobj.result);
this.api.setContactList(respdataArr);
console.log("a2", this.conlist, this.conlist.contacts, this.conlist.getThis(), Container.instance.get(ContactList));
}).catch(err => {
console.log(err);
})
;
}
...
...我在contact-list.js添加了这个声明的console.log：
created(){
this.api.getContactList().then(contacts => {
this.contacts = contacts;
console.log("b1", this, this.contacts); });
}
...而且这个功能在contact-list.js：
getThis(){
return this;
}
但是，当我运行这个（点击开始后，“点击我”按钮），我得到这个错误日志中Chromium浏览器：
VM2198 app-clist.js!transpiled:48
a1 ContactList {api: WebAPI, contacts: Array[0]} []
...
contact-list.js:21
b1 ContactList {api: WebAPI, __observers__: Object} [Object, Object, Object, Object, Object]
...
VM2198 app-clist.js!transpiled:55
a2 ContactList {api: WebAPI, contacts: Array[0]} []
ContactList {api: WebAPI, contacts: Array[0]}
ContactList {api: WebAPI, contacts: Array[0]}
...
所以，这里是我如何解释这一点：
- 消息
a1打印在AppClist类的constructor()- 它首先运行;在这一点上，ContactList类是通过注射的所谓conlist的AppClist类属性可用。在这一点上，AppClist.conlist.contacts（即，ContactList.contacts）阵列是可以理解的空的，并且具有大小为0 - 当
ContactList组分是created()，消息b1被印刷在ContactList.contacts阵列已经被初始化之后，并且第二印刷 - 再次如预期的那样，contacts阵列中有5个元素 - 消息
a2在HTTP调用完成时会打印 - 我期望在contacts阵列中有5个元素，但是有0个（不管访问方法如何）？
所以，我的问题是 - 为什么我得到0作为contacts阵列的大小，至少应该有5个？ inject可能缓存它应该引用的变量/类的状态吗？我怎样才能得到在AppClist类的contacts阵列属性ContactList类的最新状态？