Aurelia的全局功能

Global Functions In Aurelia

本文关键字：功能 全局 Aurelia      更新时间：2023-09-26

我想弄清楚如何在Aurelia中存储一个"全局"的函数。我遵循了这个教程"http://blog.durandal"。/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')调用它，但我不知道如何让这个在视图模板外可用。

对不起，我是这个框架的新手!

听起来你有一个默认的视图+视图模型，让我们把它们命名为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();
  }
}

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

也值得看看aurelia-dialog插件。您也可以将其封装在自定义属性中，这样您就不必将setModal函数导入到视图模型中。

我建议在您的配置中使用globalResources函数。

例如

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .globalResources('scripts/global.js');
  aurelia.start().then( () => aurelia.setRoot('main.js'));
}
相关文章：