[英]Aurelia : Refresh view with a Map value
在viewModel中,我有一个Map,每5s刷新一次:
Constructor(){
this myMap=new Map();
}
activate(){
//for example :
value=7;
id=1;
setInterval(()=>{
this.myMap.set(id, value++);
});
},5000);
}
在视图中:
<template>
<div class="container">
<h2>${titre}</h2>
<p class="nb-values-OK">
${myMap.get(1)}
</p>
</div>
</template>
间隔触发时什么也没有发生...定时器触发时有什么方法可以刷新我的视图?
实际上,在现实世界中,我有车道,在这些车道上有一些活动。 因此我的地图将车道ID与该车道上发生的活动数量联系起来。 在我看来,映射是最简单的排序方式……无论如何,我的第一个问题是关于每5秒刷新一次视图的方式。
在此先感谢您的帮助。 `
(希望我的英语足够好,可以理解:)。
您需要在回调函数中使用bind(this)
来访问内部模型数据,例如this.myMap
:
Constructor(){
this myMap=new Map();
}
activate(){
//for example :
value=7;
id=1;
setInterval(function(){
this.myMap.set(id, value++);
}.bind(this), 5000);
}
如果需要观察和更新复杂数据,则可以使用许多可绑定的行为 。 最简单的解决方案-使用signal api(每次发送特殊信号后,视图可绑定值都会更新):
model.js :
import {inject} from 'aurelia-dependency-injection';
import {BindingSignaler} from 'aurelia-templating-resources';
@inject(BindingSignaler)
export class SampleView {
constructor(signaler) {
this.signaler = signaler;
}
activate() {
this.data = new Map();
this.data.set(1, 1);
// data changing by interval and send update signal
setInterval(function(){
this.data.set(1, this.data.get(1) + 1);
this.signaler.signal('need-update');
}.bind(this), 1000);
}
}
model.html
<template>
<h1>${data.get(1) & signal:'need-update'}</h1>
</template>
PS
同样对于自定义属性或表达式观察器,您可以使用BindingEngine(在地图值更改时创建事件)。 请参阅该主题中的示例: 使用Aurelia进行属性更改订阅
您也可以尝试从BindingEngine的expressionObserver(观察数组或“内部”对象值): https : //stackoverflow.com/a/33482172/1276632
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.