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

一些-其他 - 视图 - 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函数导入到视图模型中.