Глобальные функции в Аурелии

Я пытаюсь выяснить, как хранить "глобальную" функцию в Aurelia. Я следил за этим учебным пособием http://blog.durandal.io/2015/04/24/aurelia-custom-elements-and-content-selectors/", чтобы открыть модальный режим с динамическим представлением, но я не могу понять, где я должен на самом деле поставить эту функцию Я могу повторно использовать все мои маршруты просмотра.

Я создал эту функцию в представлении по умолчанию:

//open modal
setModal(modal) {
    this.contentModal = modal;
    $('.modal').modal();
}

с этой разметкой внутри этого шаблона просмотра:

<a click.delegate="setModal('users')">Test</a> <a click.delegate="setModal('child-router')">Test 2</a>
<modal>
    <modal-header title.bind="'View Person'"></modal-header>
    <modal-body content.bind="contentModal"></modal-body>
    <modal-footer buttons.bind="['Cancel']"></modal-footer>
</modal>

И я могу вызвать его через click.delegate="setModal('users') внутри этого шаблона представления, но я не могу понять, как сделать это доступным вне этого шаблона представления.

Извините, я очень новичок в этой структуре!

Ответ 1

Итак, похоже, что у вас есть представление по умолчанию + модель просмотра, позволяет называть их app.html и app.js.

В app.html у вас есть модальная разметка:

<modal>
    <modal-header title.bind="'View Person'"></modal-header>
    <modal-body content.bind="contentModal"></modal-body>
    <modal-footer buttons.bind="['Cancel']"></modal-footer>
</modal>

И в app.js у вас есть функция для отображения модальности:

//open modal
setModal(modal) {
    this.contentModal = modal;
    $('.modal').modal();
}

И ваш вопрос: "Как мне поделиться функцией setModal с другими моделями просмотров?"

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

app.js

import {inject, Container} from 'aurelia-framework'; // or 'aurelia-dependency-injection'

@inject(Container)
export class App {
  constructor(container) {
    // register the setModal function in the container
    // under the key "setModal".
    container.registerInstance('setModal', this.setModal.bind(this));
  }

  //open modal
  setModal(modal) {
    this.contentModal = modal;
    $('.modal').modal();
  }
}

некоторые-другие-View-model.js

import {inject} from 'aurelia-framework'; // or 'aurelia-dependency-injection'

@inject('setModal') // inject the setModal function into this view-model
export class SomeOtherViewModel {
  constructor(setModal) {
    // create a setModal property for binding purposes
    this.setModal = setModal;
  }
}

Также возможно посмотреть на плагин aurelia-dialog. Вы можете также обернуть это в пользовательский атрибут, чтобы вам не пришлось импортировать функцию setModal в ваши модели просмотра.

Ответ 2

Я бы рекомендовал использовать функцию globalResources в вашей конфигурации.

Примером может быть

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .globalResources('scripts/global.js');

  aurelia.start().then( () => aurelia.setRoot('main.js'));
}