Question

我有7个问题，我想在页面上每次单独询问一次。我将它们中的每一个都放在单个模板中，我知道我应该使用Session.set - Session.get来每次显示/隐藏它们。但我真的不知道怎么也找不到如何去做的好例子。这是我用插入的7个问题构建布局模板的方式。

<template name="layout">
{{#if first}}
	{{> submitProblem}}
{{/if}}

{{#if second}}
	{{> submitWhy}}
{{/if}}
...
</template>

首先需要在页面打开时显示，然后我尝试使用Sessions执行此操作，但不知道......

Meteor.startup(function () {
    Session.set("first", true);
    });

Template.layout.events({
	'click .btn1':function() {
		Session.set("first", false);
		Session.set("second", true);
	}
});

在我看来，使用jQuery显示/隐藏设置显示：block / none更容易吗？

Answer 1

使用模板助手来解释第一个，第二个等是真还是假。

Template.layout.helpers({
    first: function() {
        return Session.get('first');
    },

    second: function() {
        return Session.get('second');
    }
});

Answer 2

如果要在页面上隐藏项目，则应在CSS中定义并使用.hide或.hidden类。使用jQuery show / hide显示/隐藏项目被认为是不好的做法。您应该渲染包含.hidden类的所有隐藏模板。您要显示的第一个模板没有隐藏的类。

CSS：

＆＃13;

.hidden {
  display: none;
}

＆＃13;

模板：

＆＃13;

<template name="layout">
  {{> submitProblem}}
  {{> submitWhy}}
    ...
</template>

<template name="submitProblem">
  <div id="submit-problem">
    ...
  </div>
</template>

<template name="submitWhy">
  <div id="submit-why" class="hidden">
    ...
  </div>
</template>

＆＃13;

JS：

＆＃13;

Template.layout.events({
  'click .btn1':function() {
    //show/hide items with removeClass()/addClass()
    $('#submit-problem').addClass('hidden');
    $('#submit-why').removeClass('hidden');
  }
});

＆＃13;

如何使用会话和模板来显示/隐藏元素？

2 个答案: