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