2016年7月9日 星期六

Handlebars template


當HTTP Request 要存取某一網頁,而此網頁的資訊必須是提供最新的動態資訊,一種方法就是使用網頁的templates, 所謂templates 就是提供一個範本, 和原本要提供的的HTML內容格式一致, 但template中包含了某些內容(變數) 必須要填入真正實際的資訊, 再輸出成HTML檔案

其中一種templates 為Handlebarsindex.hbs: .hbs表示此檔案是一個Handlebars templates,  副檔名為 .hbs , 檔案中會嵌入一些handlebars expression, 格式為 {{ variables  }} , 大括號裡頭到時都會經過編譯, 而成為瀏覽器最後看得懂的內容。瀏覽器能看得懂的內容: HTML、CSS、Javascript。

<div class="entry">
 <h1>{{title}}</h1> 
<div class="body"> 
{{body}} 
</div>
</div>


You can iterate over a list using the built-in each helper. Inside the block, you can use this to reference the element being iterated over.

<ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>
when used with this context:
{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley"
  ]
}
will result in:
<ul class="people_list">
  <li>Yehuda Katz</li>
  <li>Alan Johnson</li>
  <li>Charles Jolley</li>
</ul>


You can optionally provide an {{else}} section which will display only when the list is empty.
{{#each paragraphs}}
  <p>{{this}}</p>
{{else}}
  <p class="empty">No content</p>
{{/each}}



資源參考:  http://handlebarsjs.com/




沒有留言 :

張貼留言