Meteor模板-继承或外包事件以避免代码冗余

Meteor Template - inherit or outsource events to avoid code redundancy

本文关键字：事件 冗余 代码 模板 继承 包事件 Meteor      更新时间：2024-01-17

我有一个页面，里面有一堆图片库。每个图库都可以通过如下菜单链接访问：

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.

}
});
相关文章：