javascript - Aurelia - 在子组件上调用 "Refresh"

Question

我正在考虑向具有几个 Aurelia 组件的屏幕添加“刷新”按钮。我不想将它构建到作为刷新目标的组件中。

所以基本上我想在单击“刷新”按钮时重新提取一些 Web 数据以更新组件。 “重新初始化”组件以使构造函数再次运行也是可以接受的。我会把这个相同的概念应用到我拥有的几个组件中，如果存在一种模式可以通用地解决这个问题，那就太好了。

我设想了一个解决方案，涉及以某种方式在我可以添加的子组件上调用一个方法，例如类似于 childcomponent.Refresh()。但是，我不确定如何引用子组件。

处理这种情况的合适方法是什么？

Answer 1

有很多方法可以做到这一点，这里有几个选项:

使用数据绑定(bind):

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>

应用.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>

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