I'm trying to figure out how to store a "global" like function in Aurelia. I've followed this tutorial "/" to open a modal with a dynamic view modal, but I can't figure out where I should actually put this function so I can re-use it all my view routes.

I've created this function in my default view:

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

with this markup inside that view template:

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

And I can call it via click.delegate="setModal('users') inside that view template, but I can't figure out how to actually make this available outside of this view template.

Sorry I'm very new to this framework!

I'm trying to figure out how to store a "global" like function in Aurelia. I've followed this tutorial "http://blog.durandal.io/2015/04/24/aurelia-custom-elements-and-content-selectors/" to open a modal with a dynamic view modal, but I can't figure out where I should actually put this function so I can re-use it all my view routes.

I've created this function in my default view:

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

with this markup inside that view template:

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

And I can call it via click.delegate="setModal('users') inside that view template, but I can't figure out how to actually make this available outside of this view template.

Sorry I'm very new to this framework!

• javascript
• aurelia

2 Answers 2

So it sounds like you have a default view + view-model, lets call them app.html and app.js.

In app.html you have the modal markup:

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

And in app.js you have the function to display a modal:

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

And your question is "how do I share the setModal function with other view-models?"

You could register the setModal function in the container. Then you will be able to inject it into other view-models that have a dependency on that function:

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

some-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;
  }
}

It also might be worth taking a look at the aurelia-dialog plugin. You might also wrap this up in a custom attribute so that you don't have to import the setModal function into your view-models.

I would remend using the globalResources function in your configuration.

An example would be

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

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