Question

我有一个包含大量图片库的页面。每个图库都可通过以下菜单链接访问：

Gallery1  Gallery2  Gallery3

每个图库都有自己的功能，但某些功能如点击前进，点击它们共享的bardward。

文件结构如下：

Gallery_Layout.html
Gallery_Layout.js
Gallery1.html
Gallery1.js
Gallery2.html
Gallery2.js
Gallery3.html
Gallery3.js

使用FlowRouter，每个图库都在布局中呈现。目前，在每个画廊中，共享功能都是多余的。 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时，它无法正常工作。

对于帮助者我知道那里是全球帮手，是否有活动的吊坠？

问题：我如何外包或继承模板事件并将其用作可重复使用的组件？

提前致谢！

莫夫

Answer 1

1）您可以使用正文模板：

Template.body.events({

});

每个模板都加载到正文中。

2）你可以使用选择器。 Gallery是属于所有图库的HTML类，

Template.Gallery_Layout.events({
'click .gallery' (event, instance) {

 let gallery = event.target;

 // execute code on gallery.


}

});

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

1 个答案: