javascript - 在更改为包含数组时更新 Aurelia 观察到的属性

Question

我有一个简单的类，Event，带有一个计算属性:

import moment from 'moment';

export class Event {
    constructor(data) {
        Object.assign(this, data);
    }

    get playedFromNow() { 
        return moment(this.CreateDate).fromNow();
    }
}

playedFromNow 只是返回一个基于 CreateDate 属性的字符串，例如 7 分钟前。

viewmodel 获取事件数组，view 渲染这些事件。每次发生新事件时(每隔几分钟)，数组都会通过 websockets 更新。

<div repeat.for="event of events">
    <div class="media-body">
        <h4 class="media-heading">${event.title} <small>${event.playedFromNow}</small></h4>
    </div>
</div>

和(相关的) View 模型代码:

let  socket = io();
socket.on(`new-event`, (data) => { 
  this.events.unshift(new Event(data)); // add to the event array at the top
});

// subscribe
let subscription = bindingEngine.collectionObserver(this.events).subscribe();
// unsubscribe
subscription.dispose();

目前该属性是脏检查的，这意味着该属性被检查并经常更改 - 这有点不必要，屏幕上显示了很多事件，所以我担心随着时间的推移性能。有什么方法可以触发基于数组绑定(bind)的重新计算并更新 VM 中的代码？:

Answer 1

最新的 aurelia 版本有一个新功能:binding behaviors这将有助于此用例。

第一步是从 View 模型中删除 playedFromNow 属性。我们将把逻辑放在值转换器中以消除脏检查并使逻辑能够在其他 View 中重用:

来自-now.js

import moment from 'moment';

export class FromNowValueConverter {
  toView(date) {
    return moment(date).fromNow();
  }
}

现在让我们更新我们的 View 以使用值转换器以及内置的 signal 绑定(bind)行为。使用 signal，我们将能够告知绑定(bind)何时刷新。

将 ${event.playedFromNow} 更改为:

${event.CreateDate | fromNow & signal:'tick'}

这个绑定(bind)用简单的英语说，使用 fromNow 转换器转换日期值，并在 tick 发出信号时刷新绑定(bind)。

不要忘记在 View 顶部导入值转换器:

<!-- this goes at the top of any view using the FromNowValueConverter -->
<require from="./from-now"></require>

最后，让我们定期触发 tick 信号……每分钟？

import {BindingSignaler} from 'aurelia-templating-resources';

@inject(BindingSignaler)
export class App {  
  constructor(signaler) {
    // refresh all bindings with the signal name "tick" every minute:
    setInterval(() => signaler.signal('tick'), 60 * 1000);
  }
}