Meteor学习路程（二）之模板的例子

最新推荐文章于 2018-09-19 00:17:41 发布

Miss_LL

最新推荐文章于 2018-09-19 00:17:41 发布

阅读量1.4k

点赞数

分类专栏： meteor

本文链接：https://blog.csdn.net/miss_ll/article/details/54313415

版权

meteor 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先先介绍Meteor模板系统Spacebars：

Spachebars只是在HTML基础上多个标签，Meteor只是让模板和逻辑进行分离。为了让连接变得更加流畅，一个模板需要helper（helper就是厨师用的食材（数据），烹饪好佳肴（模板），再由服务器端到你面前），换另一种说法就是（模板的作用局限于显示或循环遍量，而helper则负责把值分配给变量）

为了简单起见，将采用helper和模板同名的方式创建，区别是前者后缀是js，后者后缀是html

就是简单的给HTML添加三件事：Inclusion(或Partial)、Expression和Block Helper

Inclusion：通过{{> templateName}}标记，直接告诉Meteor这部分需要用相同名称模板来取代

Expression：比如{{title}}标记，要么调用当前对象的属性，要么对应到当前模板管理器中定义的helper方法，并返回其方法值

Block Helper：在模板中控制流程的特殊标签如{{#each}}...{{/each}}或{{#if}}...{{/if}}

第一步：用《Meteor学习路程（一）之简介与安装》（http://blog.csdn.net/miss_ll/article/details/54312254）的方式新建一个Meteor项目【只有安装meteor的时候才需要翻墙，建项目不需要翻了】

第二步：为了让界面更美观，我们这里使用Bootstrap来进行美化。因此需要引入bootstrap

meteor add twbs:bootstrap

第二步：打开项目（我的名为template）中/client文件夹，在main.html中添加一个总标题栏并且添加模板的插入点{{> postsList}}标签

<body>
  <div class="container">
      <header class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
              <a class="navbar-brand" href="/">总标题</a>
          </div>
      </header>
      <div id="main">
          {{> postsList}}
      </div>
  </div>
</body>

第三步：建立模板文件。

1.在/client里面创建一个/templates文件夹用于存放所有模板，接着在/templates里面创建一个/posts文件夹存放帖子相关的小模板。

2.接下来在client/templates/posts目录中新建一个posts_list.html（html里面只有这个，其他全部删除哦）

<template name="postsList">
    <div class="posts">
        {{#each posts}}
            {{> postItem}}
        {{/each}}
    </div>
</template>

3.再在此路径添加post_item.html （html里面只有这个，其他全部删除哦）

<template name="postItem">
    <div class="post">
        <div class="post-content">
            <h3>
                <a href="{{url}}">{{title}}</a>
                <span>{{domain}}</span>
            </h3>
        </div>
    </div>
</template>

首先在postsList模板里通过{{#each}}...{{/each}}Block Helper去遍历一个posts对象，然后每次迭代都包含postItem模板。

postItem模板只用了三个标签{{url}}、{{title}}返回其集合属性，而{{domain}}则调用模板对应的helper方法

第四步：建立helper

1.在client/templates/posts目录中创建相应的posts_list.js helper文件

var postsData = [
    {
        title:'Introducing Telescope',
        url:'http://sachagreif.com/introducing-telescope/'
    },
    {
        title:'Meteor',
        url:'http://meteor.com'
    },
    {
        titile:'The Meteor Book',
        url:'http://themeteorbook.com'
    }
];
Template.postsList.helpers({
    posts:postsData
});

解析：

首先放置一些虚拟的基本数据到postsData数组中；然后使用Meteor的Template.postsList.helper()函数，建立了posts模板helper来返回刚刚定义的postsData数组；定义posts helper就是让模板可以使用它，所以模板可以遍历postsData数组并将里面的每个对象发送到postItem模板中。
2.在client/templates/posts目录中创建相应的post_item.js文件

Template.postItem.helpers({
    domain:function () {
        var a = document.createElement('a');
        a.href=this.url;
        return a.hostname;
    }
});

解析：

这次domain helper值不再是一个数组，而是一个匿名函数。

Meteor有一大很实用特点就是修改文件时，不需要手动刷新页面，浏览器就会自动重新加载。这是因为Meteor跟踪了项目目录下的所有文件，当检测到其中一个文件发生改动的时候，就会刷新浏览器。

最终结果如下：

Miss_LL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Meteor学习路程（二）之模板的例子

第一步：用《Meteor学习路程（一）之简介与安装》（http://blog.csdn.net/miss_ll/article/details/54312254）的方式新建一个Meteor项目【只有安装meteor的时候才需要翻墙，建项目不需要翻了】第二步：为了让界面更美观，我们这里使用Bootstrap来进行美化。因此需要引入bootstrapmeteor add twbs:bootst
复制链接

扫一扫