我正在试图找出如何在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') 在该视图模板中，但我无法弄清楚如何在此视图模板之外实际提供此功能。
对不起，我对这个框架很新！
所以听起来你有一个默认的视图+视图模型，让我们称它们为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;
}
}
它也许值得一看 奥里利亚-对话 插入。您也可以将其包装在自定义属性中，这样您就不必将setModal函数导入到视图模型中。
所以听起来你有一个默认的视图+视图模型，让我们称它们为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;
}
}
它也许值得一看 奥里利亚-对话 插入。您也可以将其包装在自定义属性中，这样您就不必将setModal函数导入到视图模型中。
我建议使用 globalResources 功能在您的配置中。
一个例子是
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.globalResources('scripts/global.js');
aurelia.start().then( () => aurelia.setRoot('main.js'));
}