zoukankan      html  css  js  c++  java
  • meteor实例—3—(模板、数据及展示)

    Meteor 模板
    我们项目的核心是社会新闻网站,它是由一系列的帖子所组成的,而这正是我们要调用模板的原因。
    我们先在/client 里面创建一个/templates 目录。这里用来放我们所有的模板,这样可以保持项目结构的清晰
    整洁,接着在/templates 里面再创建/posts 目录来存放与帖子相关的模板。
    查找文件
    Meteor 的强大之处在于文件的查找。无论你把代码文件放在/client 目录下的任何地方,Meteor 都可以找到它
    并且正确地进行编译。这意味着你永远都不需要手动编写 JavaScript 或 CSS 文件的调用路径。
    这也意味着你可能会把所有的文件放在同一目录,甚至所有的代码放在同一个文件。但由于 Meteor 会把一切的
    代码都编译到一个压缩的文件里面,因此我们更偏向于把项目弄得井井有条,使用更整洁的文件结构,提高项目
    的可读性。
    第 4 章 模版 | 23
    接下来我们开始创建第二个模板。在client/templates/posts 目录中,创建posts_list.html :

    1 <template name="postsList">
    2 <div class="posts">
    3 {{#each posts}}
    4 {{> postItem}}
    5 {{/each}}
    6 </div>
    7 </template>
    View Code

    和post_item.html :

    1 <template name="postItem">
    2 <div class="post">
    3 <div class="post-content">
    4 <h3><a href="{{url}}">{{title}}</a><span>{{domain}}</span></h3>
    5 </div>
    6 </div>
    7 </template>
    View Code

    注意模板的name="postsList" 属性,它的作用是告诉 Meteor 去根据这个名称来跟踪这个模板的位置。(需要注意的是与实际文件的文件名不相关。)

    以下是各种数据的来龙去脉:

    文件mian.html :  {{> postsList}}    //指定模版名字postsList

    文件post_list.html : <template name="postsList">    //模板postsList

    文件post_list.js : Template.postsList.helpers({ posts: postsData });    //通过helpers为postsList模板关联数据,数据赋值给posts对象

    文件post_list.html : {{#each posts}}  {{> postItem}}  {{/each}}    //遍历posts对象,并调用postItem模板

    文件post_item.html : <template name="postItem">    //postItem模板展示数据

    是时候来介绍 Meteor 的模板系统 Spacebars 了。Spacebar 就是简单的 HTML 加上三件事情:Inclusion(有时也称作 “partial”)、Expression 和 Block Helper。
    Inclusion :通过 {{> templateName}} 标记,简单直接地告诉 Meteor 这部分需要用相同名称的模板来取代(在我们的例子中就是postItem )。
    Expression :比如 {{title}} 标记,它要么是调用当前对象的属性,要么就是对应到当前模板管理器中定义的 helper 方法,并返回其方法值(后面会详细讨论)。
    Block Helper :在模板中控制流程的特殊标签,如 {{#each}}…{{/each}} 或 {{#if}}…{{/if}} 。

  • 相关阅读:
    September 17th 2016 Week 38th Saturday
    【2016-09-16】UbuntuServer14.04或更高版本安装问题记录
    September 16th 2016 Week 38th Friday
    September 11th 2016 Week 38th Sunday
    September 12th 2016 Week 38th Monday
    September 10th 2016 Week 37th Saturday
    September 9th 2016 Week 37th Friday
    c++暂停
    八皇后问题
    ( 转转)Android初级开发第九讲--Intent最全用法(打开文件跳转页面等)
  • 原文地址:https://www.cnblogs.com/wonderhow2/p/6341229.html
Copyright © 2011-2022 走看看