我有一个页面,里面有一堆图片库。每个图库都可以通过如下菜单链接访问:
Gallery1 Gallery2 Gallery3
每个图库都有自己的功能,但它们共享某些功能,如点击前进和点击栏。
文件结构如下:
Gallery_Layout.html
Gallery_Layout.js
Gallery1.html
Gallery1.js
Gallery2.html
Gallery2.js
Gallery3.html
Gallery3.js
使用FlowRouter,每个Gallery都会在布局中进行渲染。目前,所说的共享功能在每个Galleries的js文件中都是多余的:
Gallery1.js:
Template.gallery1.events({
'click .btn-backward' (event, template) {
// show last picture
},
'click .btn-forward' (event, template) {
// show next picture
}
});
Gallery2.js:
Template.gallery2.events({
'click .btn-backward' (event, template) {
// show last picture
},
'click .btn-forward' (event, template) {
// show next picture
}
});
等等…
当我将这些事件外包给父模板Gallery_Layout.js时,它不起作用。
对于帮助者,我知道有全局帮助者,有活动的吊坠吗?
问题:如何外包或继承Template事件并将其用作可重用组件?
提前感谢!
Muff
1)您可以使用主体模板:
Template.body.events({
});
每个模板都加载在主体内部。
2) 你可以使用选择器。Gallery是一个属于所有Gallery的HTML类,
Template.Gallery_Layout.events({
'click .gallery' (event, instance) {
let gallery = event.target;
// execute code on gallery.
}
});