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

问题描述

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

 从'时刻'导入时刻; 
 
导出类事件{
构造函数（数据）{
 Object.assign（this，data）; 
} 
 
 get playingFromNow（）{
 return moment（this.CreateDate）.fromNow（）; 
} 
} 
  

playingFromNow 只返回基于 CreateDate 属性的字符串，比如 7分钟前。

viewmodel获取一系列事件，视图呈现事件。每次发生新事件时（每隔几分钟），数组就会通过websockets进行更新。

 < ; div repeat.for =事件的事件> 
< div class =media-body> 
< h4 class =media-heading> $ {event.title}< small> $ {event.playedFromNow}< / small>< / h4> 
< / div> 
< / div> 
  

以及（相关）viewmodel代码：

< pre class =lang-js prettyprint-override> let socket = io（）;
socket.on（`new-event`，（data）=> {
this.events.unshift（new Event（data））; //添加到顶部$ b的事件数组$ b}）;

//订阅
let subscription = bindingEngine.collectionObserver（this.events）.subscribe（）;
//取消订阅
subscription.dispose（）;


目前该物业已经过脏检查，这意味着物业已经过检查并且经常变化 - 这是一个有点不必要，屏幕上显示很多事件，所以我担心一段时间内的性能。有没有办法可以根据数组中的数组绑定和更新代码触发重新计算？：

解决方案

最新aurelia发布了一个新功能：绑定行为，这将有助于此用例。

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

来自 - now.js

 从'moment'导入时刻; 
 
导出类FromNowValueConverter {
 toView（date）{
 return moment（date）.fromNow（）; 
} 
} 
  

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

更改 $ {event.playedFromNow} to：

  $ {event。 CreateDate | fromNow&信号：'tick'} 
  

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

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

 <！ - 这是使用FromNowValueConverter的任何视图的顶部 - > 
< require from =./ from-now>< / require> 
  

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

 从'aurelia-templating-resources'导入{BindingSignaler}; 
 
 @inject（BindingSignaler）
导出类App {
构造函数（信号器）{
 //每分钟刷新信号名称为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屋！