Aurelia'da Global İşlevler

Question

Aurelia'da "global" benzeri bir işlevi nasıl saklayacağımı anlamaya çalışıyorum. Dinamik görünüm modeliyle bir modal açmak için bu eğiticiyi "http://blog.durandal.io/2015/04/24/aurelia-custom-elements-and-content-selectors/" takip ettim, ancak bu işlevi nereye koyacağımı anlayamıyorum, böylece tüm görünüm rotalarımı yeniden kullanabilirim. bu görünüm şablonu içinde bu biçimlendirme ile

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

:

benim varsayılan görünümde bu fonksiyonu oluşturduk

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

Ve bu görünüm şablonu içinde click.delegate="setModal('users') aracılığıyla diyoruz, ama Bu görünüm şablonunun dışında bunu nasıl hazırlayacağımı anlayamıyorum.

Üzgünüm bu çerçevede çok yeniyim! Varsayılan bir görünüm + görünüm-modeli var gibi

Answer 1

Yani bu sesler, app.html ve app.js. diyoruz sağlar app.html yılında

, kalıcı biçimlendirme var:

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

Ve app.js içinde bir kalıcı görüntülemek için fonksiyonlara sahiptir:

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

Ve soru nasıl" olduğunu SetModal işlevini diğer görünüm modelleriyle paylaşıyorum? "

Kapsayıcıdaki setModal işlev kayıt olabilir.

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

bazı-other-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; 
    } 
} 

app.js: Sonra bu işlevin bir bağımlılık diğer görüntüleme modelleri enjekte etmek mümkün olacak

aurelia-dialog eklentisine de göz atmaya değer olabilir. Bunu ayrıca, setModal işlevini görünüm modellerine almak zorunda kalmamak için özel bir öznitelikte de ekleyebilirsiniz.

Answer 2

Ben senin yapılandırmasında globalResources işlevini kullanarak öneriyoruz.

örneği özel ayrıntılarla içine bakacağız, bir tedavi çalıştı

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

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