Aurelia的全局功能
Global Functions In Aurelia
我想弄清楚如何在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'));
}
相关文章:
- 全局变量和全局对象的属性之间有什么区别吗
- 添加文字和评论功能更新Div
- JavaScript打印功能使日历停止工作
- 正在全局范围中查找JavaScript函数
- delete关键字在全局变量上的不同行为
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 在javascript函数中设置全局变量
- 如何将getJson的响应保存在全局变量中
- 如何防止网页加载后自动启动功能
- 全局对象是属于哪个类的对象
- 除修剪外的其他功能
- 悬停功能触发器
- Javascript全局onclick监听器
- JS全局/功能范围理解
- 为剑道UI窗口添加全局功能
- Aurelia的全局功能
- 停止全局功能
- Gulp通知全局成功功能
- 在服务器、客户端和所有文件之间共享Meteor功能,而不声明它们为全局文件
- JavaScript使对象一个全局窗口对象?(无冲突功能)