Funkcje globalne w Aurelia

Question

Próbuję dowiedzieć się, jak przechowywać funkcję "globalną" w Aurelia. Skorzystałem z tego samouczka "http://blog.durandal.io/2015/04/24/aurelia-custom-elements-and-content-selectors/", aby otworzyć modal z dynamicznym modulem widoku, ale nie mogę ustalić, gdzie powinienem umieścić tę funkcję, aby móc ponownie wykorzystać wszystkie moje trasy widoków.

Stworzyłem tę funkcję w moim domyślnym widoku:

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

z tego widoku znaczników wewnątrz tego szablonu:

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

I mogę nazwać go poprzez click.delegate="setModal('users') wewnątrz tego szablonu widoku, ale Nie mogę wymyślić, jak to zrobić, poza tym szablonem widoku.

Przykro mi, jestem bardzo nowy w tym systemie!

Answer 1

Wygląda na to, że masz domyślny widok + widok modelu, zadzwoń do nich app.html i app.js.

W app.html masz modalne znaczników:

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

I app.js masz funkcję wyświetlania modalnego:

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

I pytanie jest „jak zrobić Dzielę się funkcją setModal z innymi modelami widoku? "

Można zarejestrować funkcję setModal w kontenerze. Wtedy będzie można wstrzyknąć go do innych obejrzeniu modeli, które mają zależność tej funkcji:

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

pewne-inne-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; 
    } 
} 

Warto również rzucić okiem na wtyczkę aurelia-dialog. Możesz także zawinąć to w niestandardowy atrybut, abyś nie musiał importować funkcji setModal do swoich modeli widoku.

Answer 2

Polecam używanie funkcji globalResources w konfiguracji.

Przykładem może być

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

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