Blog 已遷移,logdown 版本不再更新,麻煩大家前往新網站觀看^^

Discover meteor Ch2:Getting Start & Ch3 Templates

Chap 2 Getting start

What is Meteor

Meteor一個用來開發real-time web apps的一個建立在Node.js之上的平台。

Getting Started

  1. 輸入mrt create microscope 創造一個microscope這個meteor app。
  2. 安裝需要的package,輸入mrt add iron-router安裝iron-router。
  3. 輸入mrt add bootstrap安裝bootstrap,之後可以直接使用bootstrap不需include。
  4. 刪除掉microscope.html, microscope.js, and microscope.css這三個檔案。
  5. 創造/client, /server, /public, /lib和/collections這幾個資料夾。
  6. 建立一個資料夾client/stylesheets/把style.css丟進去。 css檔的github連結

Meteor App中資料夾的用途:

  • Code in the /server directory only runs on the server.
  • Code in the /client directory only runs on the client.
  • Everything else runs on both the client and server.
  • Files in /lib are loaded before anything else.
  • Any main.* file is loaded after everything else.
  • Your static assets (fonts, images, etc.) go in the /public directory. 我們不會用到public這個資料夾因為micropost這個專案不會用static assets。 Meteor is great at finding files. 在client中的css與js檔不需要在html檔中include。(原書ch3提到)

2.5 Deployment


$ meteor deploy -p

還介紹了幾種meteor deploy的空間和方法,暫時略過有空的時候在來看它。

Chapter 3 Templates

  1. 在client底下新增main.html

      <div class="container">
        <header class="navbar">
          <div class="navbar-inner">
            <a class="brand" href="/">Microscope</a>
        <div id="main" class="row-fluid">
          {{> postsList}}
  2. create a /views directory inside /client

  3. Inside client/views/posts, create posts_list.html

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

    posts實際上是一個template helper。

  4. Add post_item.html:

    <template name="postItem">
      <div class="post">
        <div class="post-content">
          <h3><a href="{{url}}">{{title}}</a><span>{{domain}}</span></h3>
  5. 新增posts_list.js

    var postsData = [ 
        title: 'Introducing Telescope',
        author: 'Sacha Greif',
        url: ''
        title: 'Meteor',
        author: 'Tom Coleman', 
        url: ''
        title: 'The Meteor Book', 
        author: 'Tom Coleman',
        url: ''
    Template.postsList.helpers({ posts: postsData });

    最後一行Template.postsList.helpers({ posts: postsData });的意思是我們利用meteor的template helper把post存進postsData這個array之中。

  6. 做完之後下commit

    git commit -m "Added basic posts list template and static data"
  7. 新增post_item.js

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

    This time our domain helper's value is not an array, but an anonymous function.
    Back to our posts_list.html template. The {{#each}} block helper not only iterates over our array, it also sets the value of this inside the block to the iterated object.

  8. 下Commit 3-2

    git commit -m "Setup a domain helper on the postItem"

Template 名詞解釋

  • Partials use the {{> templateName}} syntax, and simply tell Meteor to replace the partial with the template of the same name (in our case postItem).
  • Expressions such as {{title}} either call a property of the current object, or the return value of a template helper as defined in the current template's manager (more on this later).
  • Finally, block helpers are special tags that control the flow of the template, such as {{#each}}... {{/each}} or {{#if}}...{{/if}}.

Template Managers

這邊介紹了一下Template Managers的概念。


的js檔就稱作是一個template manager。

Template 資源

meteor doc - template helpers

The Value of this

3.5 Using Git & GitHub