javascript - 奥里利亚 : Refresh view with a Map value

Question

在 viewModel 中，我有一个每 5 秒刷新一次的 map :

 Constructor(){
        this myMap=new Map();

    }
    activate(){
       //for example :
       value=7;
       id=1;
       setInterval(()=>{
          this.myMap.set(id, value++);
          });
        },5000);
    }

在 View 中:

<template>
  <div class="container">
  <h2>${titre}</h2>
  <p class="nb-values-OK">
    ${myMap.get(1)}
  </p>
  </div>
</template>

当间隔触发时什么都没有发生...有没有什么方法可以在计时器触发时刷新我的 View ？

事实上，在现实世界中，我有车道，在这些车道上有一些事件；所以我的 map 在车道 ID 和该车道上发生的事件数量之间建立了联系。在我看来， map 是对这个进行排序的最简单方法......不管怎样，我的第一个问题是关于如何让我的 View 每 5 秒刷新一次。

在此先感谢您的帮助。`

(希望我的英语足够好，可以被理解:))。

Answer 1

您需要在回调函数中使用 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);
}

如果您需要观察和更新复杂数据，那么您可以使用 many bindable behaviors 。最简单的解决方案——使用信号 api(每次发送特殊信号时， View 可绑定(bind)值都会更新):

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>

附言

对于自定义属性或表达式观察器，您还可以使用 BindingEngine(在 map 值更改时创建事件)。请参阅该主题中的示例:Property change subscription with Aurelia

您也可以尝试 BindingEngine 中的 expressionObserver(以观察数组或“内部”对象值):https://stackoverflow.com/a/33482172/1276632