所以听起来你有一个默认的视图+视图模型,我们称它们为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();
}
}
一些其他视图模型.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-对话 https://github.com/aurelia/dialog插入。您还可以将其包装在自定义属性中,这样您就不必将 setModal 函数导入到视图模型中。