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

Question

Я пытаюсь выяснить, как хранить «глобальную» функцию в 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') внутри этого шаблона вида, но Я не могу понять, как сделать это доступным вне этого шаблона.

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

Answer 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 в ваши модели просмотра.

Answer 2

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

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

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

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