更新奧裏利亞觀察變化特性包含陣列

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> 

而且（相關）視圖模型代碼：

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