Update 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 minutes ago.

Viewmodel получает массив событий, и представление отображает события. Массив обновляется через websockets каждый раз, когда происходит новое событие (каждые несколько минут).

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

И (отношение) ViewModel код:

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

В настоящее время имущество загрязнен проверяется, что означает, что свойство проверяется и изменяется очень часто - это немного ненужных и Есть много событий, отображаемых на экране, поэтому меня беспокоит производительность с течением времени. Есть ли способ, с помощью которого я могу инициировать пересчет, основанный на привязке и обновлении кода в VM ?:

Answer 1

В последнем выпуске aurelia появилась новая функция: binding behaviors, которая поможет в этом случае использования.

Первым шагом будет удаление playedFromNow недвижимости с торговой точки. Мы собираемся поставить логику в значении преобразователя для устранения грязной проверки и включить логику для повторного использования в других просмотрах:

из-now.js

import moment from 'moment'; 

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

Теперь давайте обновите наше представление, чтобы использовать конвертер значений, а также встроенный способ привязки signal. С signal мы сможем сообщить привязку при обновлении.

Изменить ${event.playedFromNow} на:

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

На простом английском языке это связывание говорит, преобразовать значение даты с помощью fromNow преобразователя и обновления привязки, когда tick сигнализируется.

Не забудьте импортировать преобразователь значений в верхней части вашей точки зрения:

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