gpt4 book ai didi

javascript - 如何以编程方式显示/隐藏属于 Meteor 主体模板一部分的按钮?

转载 作者:行者123 更新时间:2023-11-30 12:14:50 27 4
gpt4 key购买 nike

我在 Meteor 应用程序中使用 Template.dynamic 功能。显示的初始模板是主要模板,用户通常会希望从他们移动到的任何模板立即返回到该模板。我想通过“返回”按钮使这种返回初始/主要模板的能力非常明显。

首先让我概述一下我是如何更换模板的:

  Template.mnuScheduler.events({
"click #mniOpenExisting": function () {
Session.set('curTemplate', 'scheduleOpenExisting');
},

Template.body.helpers({
currentTemplate: function () {
return Session.get('curTemplate');
}
});

<div class="container">
{{> mnuScheduler}}
{{> Template.dynamic template=currentTemplate}}

我不希望“返回”按钮在主模板上可见,因为不需要返回到它本身。

我可以在每个模板的底部放置这样一个“返回”按钮,然后在每个模板的 OnRendered 事件中显示它:

$('btnBack').removeClass('hide');

...CSS 类在哪里:

.hide {
visibility: hidden;
display: none;
}

...但是这里必须有一种方法来实现 DRY 原则,而不是在每个模板上重复一个“返回”按钮。

起初我想如果我像这样把“后退按钮”放在正文中:

main.html:

<body>

<div class="container">
{{> mnuScheduler}}
{{> Template.dynamic template=currentTemplate}}
{{> backButton}}
</div>

</body>

<template name="backButton">
<div>
<button class="hide" type="button" id="btnGoBack" name="btnGoBack">Go Back</button>
</div>
</template>

...我可以在换出模板的地方添加这样的代码:

  Template.mnuScheduler.events({
"click #mniOpenExisting": function () {
Session.set('curTemplate', 'scheduleOpenExisting');
$('btnBack').removeClass('hide');
},

...但是“btnBack”不是“mnuScheduler”模板的一部分,因此无法识别“btnBack”。

如果我只将后退按钮放在一个地方('body' 模板),我可以从另一个模板的事件中引用它吗?有没有办法做这样的事情:

  Template.mnuScheduler.events({
"click #mniOpenExisting": function () {
Session.set('curTemplate', 'scheduleOpenExisting');
Template.body.$('btnBack').addClass('hide');
},

?

更新

我想我在尝试实现 Michael Floyd 的建议时做错了什么。

主要模板(最初显示的模板)是“tblScheduler”。这是我添加的内容:

//main.html:

<body>
<div class="container">
{{> mnuScheduler}}
{{> Template.dynamic template=currentTemplate}}
{{#unless isChiefTemplate}}
<button type="button" id="btnDisplayScheduleTemplate" name="btnDisplayScheduleTemplate">Display Schedule</button>
{{/unless}}
{{> footer}}
</div>

</body>

//主.js:

Template.tblScheduler.helpers({
jobLocations: function() {
return JobLocations.find({}, {sort: {jl_jobloc: 1}, fields: {jl_jobloc: 1}});
},
isChiefTemplate: function() {
return true;
},
. . .

Template.body.events({
'click #btnDisplayScheduleTemplate': function() {
Session.set('curTemplate', 'tblScheduler');
}
}); // Template.body.events({

但“显示计划”按钮在主模板 (tblScheduler) 上仍然可见。

注意:“body”事件起作用——点击按钮确实从任何其他模板切换到主模板(tblScheduler);只是那个按钮即使在 主模板上也是可见的,这仍然是问题所在。

最佳答案

在 Template.tblScheduler.helpers 中定义助手不起作用,因为您从 body template 调用它:

要么像这样创建一个全局模板:

Template.registerHelper('isChiefTemplate', function(){
return Session.get('curTemplate') === 'tblScheduler';
})

或者在 Body 模板上定义它:

Template.body.helpers({
isChiefTemplate: function(){
return Session.get('curTemplate') === 'tblScheduler';
},
});

以及您的更新/Michel Floyd 的回答中的模板:

{{#unless isChiefTemplate}}
<button type="button" id="btnDisplayScheduleTemplate" name="btnDisplayScheduleTemplate">Display Schedule</button>
{{/unless}}

关于javascript - 如何以编程方式显示/隐藏属于 Meteor 主体模板一部分的按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32681480/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com