在更改为包含数组时更新 Aurelia 观察到的属性 [英] Update Aurelia observed property on change to containing array

问题描述

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

从'时刻'导入时刻；导出类事件{构造函数(数据){Object.assign(this, data);}从现在开始播放(){返回时刻(this.CreateDate).fromNow();}}

playedFromNow 仅返回基于 CreateDate 属性的字符串，例如 7 分钟前.

视图模型获取事件数组，视图呈现事件.每次发生新事件时(每隔几分钟)，该数组都会通过 websockets 更新.

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

以及(相关的)视图模型代码:

let socket = io();socket.on(`new-event`, (data) => {this.events.unshift(new Event(data));//添加到顶部的事件数组});//订阅让订阅 = bindingEngine.collectionObserver(this.events).subscribe();//取消订阅订阅.处置()；

当前属性是脏检查的，这意味着属性被检查和更改非常频繁 - 这有点不必要，屏幕上显示了很多事件，所以我担心随着时间的推移性能.有没有办法根据VM中的数组绑定和更新代码触发重新计算?:

解决方案

最新的 aurelia 版本有一个新特性:binding行为将有助于此用例.

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

from-now.js

从'时刻'导入时刻；导出类 FromNowValueConverter {到视图(日期){返回时刻(日期).从现在()；}}

现在让我们更新我们的视图以使用值转换器以及内置的 signal 绑定行为.使用 signal，我们将能够告诉绑定何时刷新.

将 ${event.playedFromNow} 更改为:

${event.CreateDate |从现在开始信号:'滴答'}

简单地说，这个绑定说，使用 fromNow 转换器转换日期值，并在 tick 发出信号时刷新绑定.

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

<!-- 使用 FromNowValueConverter 位于任何视图的顶部 --><require from="./from-now"></require>

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

import {BindingSignaler} from 'aurelia-templating-resources';@inject(BindingSignaler)出口类应用{构造函数(信号器){//每分钟刷新所有带有信号名称tick"的绑定:setInterval(() => signaler.signal('tick'), 60 * 1000);}}

I have a simple class, Event with a computed property:

import moment from 'moment';

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

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

playedFromNow just returns a string based on the CreateDate property, like 7 minutes ago.

The viewmodel gets an array of events and the view renders the events. The array gets updated via websockets every time a new event occurs (every few minutes).

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

And the (relevant) viewmodel code:

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

Currently the property is dirty checked, which means the property is checked and changes very frequently - this is a bit unnecessary and there are a lot of events shown on a screen so I'm concerned about performance over time. Is there a way that I can trigger the recalculation based on the array binding and update code in the VM?:

解决方案

The latest aurelia release has a new feature: binding behaviors that will help with this use case.

First step would be to remove the playedFromNow property from the view-model. We're going to put the logic in a value-converter to eliminate the dirty-checking and enable the logic to be reused in other views:

from-now.js

import moment from 'moment';

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

Now lets update our view to use the value converter as well as the built-in signal binding behavior. With signal we'll be able to tell the binding when to refresh.

Change ${event.playedFromNow} to:

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

In plain english this binding says, convert the date value using the fromNow converter and refresh the binding whenever tick is signaled.

Don't forget to import the value converter at the top of your view:

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

Finally, let's fire the tick signal periodically... every minute?

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

这篇关于在更改为包含数组时更新 Aurelia 观察到的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！