Meteor开发平台入门 互动版

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

数据上下文

毫无疑问,模板比单纯的HTML片段的优势就在于对数据的利用,这个与模板配套的数据 对象被称为模板的数据上下文

data-context

≡ 使用{{> template}}设置数据上下文

在调用子模板时,可以使用关键字参数为子模板指定数据上下文。下面的示例 将为hello子模板设置数据上下文{name:"Linda",age:19}

<template name="entry">
  {{> hello name="Linda" age=19}}
</template>

≡ 使用{{#with data}}标签设置数据上下文

如果想直接在一个模板的一部分片段设置数据上下文,除了将这部分作为子模板调用, 还可以使用{{#with}}标签设置模板片段的数据上下文。下面的示例为entry模板 的一部分设置了单独的数据上下文对象{name:"john",age:28}

<template name="entry">
  <h1>demo title</h1>
  {{#with name="John" age=28}}
  <p>{{name}} is {{age}} years old!</p>
  {{/with}}
</template>

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

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

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

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

理解并修改tpl-datacontext示例代码,通过练习掌握在Meteor应用中如何为一个 模板设置数据上下文。