Question

我希望将一个大网页分成一小块用户，这样他们就不会被页面大小/他们必须输入的信息量（无论如何都是一次性）所淹没。

我正在使用Meteor，并希望知道如何使用该平台实现这一目标。

首先想到的是为每个＆＃34;子页面创建一个单独的模板＆＃34;我想向用户显示，然后一个接一个地呈现模板。我想的可能是这样的：

<body>
<h2>Thirteen Ways of Looking at a Duckbilled Platypus</h2>

<br/>
<br/>

<div class="container">
   {{> whizzardBlizzard}}
</div>

</body>

<template name="whizzardBlizzard">
    <form>
    {{#if firstStep}}
    {{> firstStepTemplate}}
    {{/if}}
    {{#if secondStep}}
    {{> secondStepTemplate}}
    {{/if}}
    {{#if thirdStep}}
    {{> thirdStepTemplate}}
    {{/if}}
    <input type="submit" value="Submit" class="button">
    </form>
</template>

<template name="firstStepTemplate">
  <h2>Step 1</h2>
</template>

<template name="secondStepTemplate">
  <h2>Step 2</h2>
</template>

<template name="thirdStepTemplate">
  <h2>Step 3</h2>
</template>

提交事件处理程序将是一个模板事件方法，它将保存在每一步输入的数据并更新＆＃34;计数器＆＃34;的值，如：

Template.whizzardBlizzard.events({
    "submit form": function (event) {
        //event.preventDefault(); <= should this be uncommented?
        // save the vals to a new document in a collection
        Session.set('stepNum', Session.get('stepNum') + 1);
    }
});

＆＃34; firstStep，＆＃34; ＆＃34; secondStep，＆＃34;也许是模板助手，例如：

Template.whizzardBlizard.helpers({
    firstStep: function() {
        return (Session.get('stepNum') == 1);
    },
    secondStep: function() {
        return (Session.get('stepNum') == 2)
    },
    thirdStep: function() {
        return (Session.get('stepNum') == 3)
    }
    . . . // etc.
});

...但我不确定这是否真的能填补这个法案或是最好的方法。有没有＆＃34;祝福＆＃34;使用Meteor或接受模式的方式吗？

如何使用Meteor创建类似向导的体验？

0 个答案: