Я хочу вызвать функцию дочернего компонента от его родителя. У меня есть способ сделать это, но я хочу знать, не упускаю ли я способ получше.

Из публикации Эшли Грант сообщение в блоге о доступе к viewModel настраиваемого элемента из настраиваемого атрибута, я вижу, что Aurelia добавляет au к элементу, и вы можете получить доступ к viewModel через это. Итак, если я добавлю вложенный компонент со ссылкой, например:

<template>
    <nested-element ref="childElement"></nested-element>
</template>

Я могу вызвать на нем такую функцию:

this.childElement.au.controller.viewModel.someFunction();

Это кажется окольным. Я надеялся, что смогу получить доступ к viewModel вложенного элемента через параметры хука, который реализует родительский объект, например created(owningView, myView), но я не могу найти к нему путь.

Я пропустил лучший способ?

Изменить: я забыл добавить, что мне нужно возвращаемое значение из функции, которую я вызываю, поэтому предпочтительно иметь доступ к самой модели просмотра

8
mgiesa 27 Ноя 2016 в 06:27

2 ответа

Лучший ответ

ref дает вам элемент. view-model.ref дает вам модель представления элемента.

<template>
    <nested-element view-model.ref="childViewModel"></nested-element>
</template>

Назовите это так в родительской модели представления:

this.childViewModel.someFunction();
12
Jeff G 27 Ноя 2016 в 18:23

Если у вас есть только один экземпляр вложенного элемента или вам все равно, реагируют ли несколько вложенных элементов на событие. Затем вы можете использовать для этого стандартные функции событий Javascript:

Bar.html

<template>
  <h1>${value}</h1>
    <input type="text" value.bind="value"></input>
    <foo>text</foo>
</template>

Bar.ts

import {bindable} from 'aurelia-framework';
export class Bar {

  @bindable value;

  public valueChanged(newValue, oldValue) {
    var event = new CustomEvent("some-event-name", { "detail": { message: "Hello from Bar", oldValue, newValue } });
    document.dispatchEvent(event);
  }
}

Foo.html

<template>
  <h1>${value}</h1>
</template>

Foo.ts

import {bindable} from 'aurelia-framework';

export class Foo {
  constructor() {
    document.addEventListener("some-event-name", (e) => {
      console.log('hello here is Foo, recieved event from Bar : ', e);
    }, true);
  }
}
1
Erik Lieben 27 Ноя 2016 в 11:59