Meteor开发平台入门 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

模板逻辑控制 - 条件

在Spacebars中,可以使用if/else模板标签,根据指定条件显示部分HTML片段。

下面的示例根据用户是否登录,分别载入不同的子模板:

<template name="main">
  {{#if loggedIn}}
    <div class="portal">...</div>
  {{else}}
    <div class="login">...</div>
  {{/if}}
</template>

与之类似的是unless/else模板标签,它对条件的处理恰好与if/else模板标签相反, 因此下面的示例实现与上例相同的功能:

<template name="main">
  {{#unless loggedIn}}
    <div class="login">...</div>
  {{else}}
    <div class="portal">...</div>
  {{/unless}}
</template>

执行以下命令复位test应用、删除源文件:

~/test$ meteor reset↵ ~/test$ rm -rf \*↵

执行以下命令拷贝tpl-if示例代码、运行并查看运行结果:

~/test$ cp ~/demos/tpl-if/* .↵ ~/test$ meteor↵

理解并修改tpl-if示例代码,通过练习掌握模板标签{{#if}}和{{#unless}}的用法与用途。