Aurelia - 在子組件上調用「刷新」

Question

我正在尋找爲具有幾個Aurelia組件的屏幕添加「刷新」按鈕。我寧願不將它構建到作爲刷新目標的組件中。

所以基本上我想重新發布一些網頁數據來更新組件時點擊這個「刷新」按鈕。 「重新初始化」組件以便構造函數再次運行也是可以接受的。我將這個概念應用到我擁有的幾個組件上，如果存在一種模式來解決這個問題，那將是一件很精緻的事情。

我設想了一個解決方案，涉及以某種方式調用我可以添加的子組件的方法，例如，像childcomponent.Refresh()。但是，我不確定我會如何引用子組件。

什麼是處理這種情況的適當方法？

Answer 1

很多方法可以做到這一點，這裏有幾個選項：

隨着數據綁定：

app.html

<template> 
    <button click.delegate="refresh()">Refresh</button> 
    <component1 data.bind="myData"></component1> 
    <component2 data.bind="myData"></component2> 
    <component3 data.bind="myData"></component3> 
</template> 

app.js

export class App { 
    myData = null; 

    activate() { 
    return this.refresh(); 
    } 

    refresh() { 
    someService.loadData() 
     .then(data => this.myData = data); 
    } 
} 

個

component1.js

import {bindable} from 'aurelia-framework'; 

export class Component1 { 
    @bindable data; 

    dataChanged(newValue, oldValue) { 
    // do something when the data changes... 
    } 
} 

隨着EventAggregator：

app.html

<template> 
    <button click.delegate="refresh()">Refresh</button> 
    <component1></component1> 
    <component2></component2> 
    <component3></component3> 
</template> 

app.js

個

import {inject} from 'aurelia-framework'; 
import {EventAggregator} from 'aurelia-event-aggregator'; // jspm install aurelia-event-aggregator 

@inject(EventAggregator) 
export class App { 
    constructor(eventAggregator) { 
    this.eventAggregator = eventAggregator; 
    } 

    activate() { 
    this.refresh(); 
    } 

    refresh() { 
    someService.loadData() 
     .then(data => this.eventAggregator.publish('data changed', data); 
    } 
} 

component1.js

import {inject} from 'aurelia-framework'; 
import {EventAggregator} from 'aurelia-event-aggregator'; // jspm install aurelia-event-aggregator 

@inject(EventAggregator) 
export class Component1 { 
    constructor(eventAggregator) { 
    this.eventAggregator = eventAggregator; 
    } 

    dataChanged(data) { 
    // do something when the data changes... 
    } 

    bind() { 
    this.subscription = this.eventAggregator.subscribe('data changed', data => this.dataChanged(data)); 
    } 

    unbind() { 
    this.subscription.dispose(); 
    } 
}