Aurelia - Invoke＆＃34; Refresh＆＃34;关于儿童部分

Question

我正在考虑添加＆＃34;刷新＆＃34;按钮到具有几个Aurelia组件的屏幕。我宁愿不将其构建到作为刷新目标的组件中。

所以基本上我想重新组织一些网络数据来更新组件，当这个＆＃34;刷新＆＃34;单击按钮。 ＆＃34;重新初始化＆＃34;构造函数再次运行的组件也是可以接受的。我将这个相同的概念应用于我拥有的几个组件，如果存在一个模式来解决这个问题，那将是非常精致的。

我设想了一个解决方案，以某种方式调用我可以添加的子组件的方法，例如像childcomponent.Refresh()这样的东西。但是，我不确定如何引用子组件。

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

Answer 1

many ways to do this, here's a couple of options:

With Data-Binding:

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...
  }
}

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