Blog 已遷移 http://steventtud.com,logdown 版本不再更新,麻煩大家前往新網站觀看^^

Discover meteor Ch2:Getting Start & Ch3 Templates

Chap 2 Getting start

What is Meteor

Meteor一個用來開發real-time web apps的一個建立在Node.js之上的平台。
而Node.js又是建立在javascript之上。
所以學習上javascript的基礎打的夠穩,對未來的理解是很有幫助的。

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

delpoy上meteor的網址可以設密碼保護,不然別人其實是可以重複deploy到你用過的網址的。

$ meteor deploy myapp.meteor.com -p

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

Chapter 3 Templates

  1. 在client底下新增main.html

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

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

    client/views/posts/posts_list.html
    
    <template name="postsList">
      <div class="posts">
        {{#each posts}}
          {{> postItem}}
        {{/each}}
      </div>
    </template>
    

    posts實際上是一個template helper。

  4. Add post_item.html:

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

    client/views/posts/posts_list.js
    
    var postsData = [ 
      {
        title: 'Introducing Telescope',
        author: 'Sacha Greif',
        url: 'http://sachagreif.com/introducing-telescope/'
      },
      {
        title: 'Meteor',
        author: 'Tom Coleman', 
        url: 'http://meteor.com'
      },
      {
        title: 'The Meteor Book', 
        author: 'Tom Coleman',
        url: 'http://themeteorbook.com'
      }
    ];
    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

    client/views/posts/post_item.js
    
    Template.postItem.helpers({ 
      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.
    在post_item.html中使用{{domain}}來呼叫它。根據定義,domain會回傳a.hostname也就是url。
    發現一個奇妙的地方,post_item.html裡面使用了{{url}}和{{title}}兩個helper而沒有直接使用迴圈讀出。
    因為上一層posts_list.html有使用迴圈。所以包在裡面的post_item.html可以直接使用posts的參數{{url}}和{{title}}。
    隱隱約約感到這個神奇設計,讓meteor很好用。並且了解到一個性質,同樣的helper名稱不能重複使用。

  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的概念。
一個裡面寫有

Template.postItem.helpers({
});

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

Template 資源

meteor doc - template helpers

The Value of this

3.5 Using Git & GitHub

Git與github的部份先行跳過