到目前為止，Spacebar 的部分介紹了 {{> 模板名稱}} 和 {{helper名稱 參數}}，今天要再介紹幾個不同的用法。

If/Unless

#if 模板標籤可以根據條件顯示標籤中的內容：

{{#if 條件}}
  <p>It's false</p>
{{/if}}

也可以加上 else 模板標籤：

{{#if 條件}}
  <p>It's true</p>
{{else}}
  <p>It's false</p>
{{/if}}

#unless 模板標籤則是和 #if 反過來：

{{#unless 條件}}
  <p>It's false</p>
{{else}}
  <p>It's true</p>
{{/if}}

例如我們在網頁上加入一個按鈕，點擊這個按鈕可以切換文字，作法如下：

<!-- my-app/client/hello.html -->
<template name="hello">
	{{#if condition}}
		<p>Condition is true</p>
	{{else}}
		<p>Condition is false</p>
	{{/if}}
	<button id="buttonToggleCondition">切換</button>
</template>

// my-app/client/hello.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

Template.hello.onCreated(function() {
    this.condition = new ReactiveVar(true);
});

Template.hello.helpers({
	condition() {
		return Template.instance().condition.get();
	},
});

Template.hello.events({
	'click #buttonToggleCondition'(event, templateInstance) {
		const condition = templateInstance.condition.get();
        templateInstance.condition.set(!condition);
	},
});

With

#with 模板標籤可以用來顯示 object 型態的資料。更精確的說，#with 改變了標籤中所參考的 object，因此在 #with 標籤中的 helper 可以透過 this 取得 #with 所參考的 object。

例如：

<!-- my-app/client/hello.html -->
<template name="hello">
	{{#with person}}
		<p>Name: {{fullName}}</p> <!-- 可以使用 helper -->
		<p>Age: {{age}}</p>       <!-- 也可以直接使用屬性名稱 -->
	{{/with}}
</template>

// my-app/client/hello.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

Template.hello.onCreated(function() {
    this.person = new ReactiveVar({
        firstName: 'Max',
        lastName: 'Hsu',
        age: 18,
    });
});

Template.hello.helpers({
	person() {
		return Template.instance().person.get();
	},
    fullName() {
        return `${this.firstName} ${this.lastName}`; // this 參考到 person object 
    },
});

Each

#each 模板標籤可以用來顯示 array 型態的資料。時常會和 Meteor cursor 搭配使用，達到 reactivity 的目的，這會在之後的章節進一步說明。

例如：

<!-- my-app/client/hello.html -->
<template name="hello">
	{{#each dogs}}
		<p>Name: {{name}}</p>
		<p>Age: {{age}}</p>
	{{/with}}
</template>

// my-app/client/hello.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

Template.hello.onCreated(function() {
    this.dogs = new ReactiveVar([{
        name: 'Guai',
        age: 2,
    }, {
        name: 'Willy',
        age:7,
    }]);
});

Template.hello.helpers({
	dogs() {
		return Template.instance().dogs.get();
	},
});

Let

#each 模板標籤則可以用來將比較長的變數重新命名。

例如：

<!-- my-app/client/hello.html -->
<template name="hello">
	{{#let frontend=meteor.frontend.framework}}
		<p>Meteor frontend framework : {{frontend}}</p>
	{{/let}}
</template>

// my-app/client/hello.js
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

Template.hello.onCreated(function() {
    this.meteor = new ReactiveVar({
        frontend: {
            framework: 'Blaze',
        },
    });
});

Template.hello.helpers({
	meteor() {
		return Template.instance().meteor.get();
	},
});

重點整理

Template

• 宣告模板：<template name="模板名稱">...</template>，寫在 .html 檔案裡。

• 定義模板的行為：

  • Template.模板名稱.onCreated()：定義該模板的物件被建立時要執行的 fuction
  • Template.模板名稱.onRendered()：定義該模板物件被插入 DOM 時要執行的 fuction
  • Template.模板名稱.onDestroyed()：定義該模板物件被摧毀時要執行的 fuction
  • Template.模板名稱.events()：定義該模板的 event handlers
  • Template.模板名稱.helpers()：定義該模板的 helpers

• 該模板物件在 onCreated(), onRendered(), onDestroyed 可以透過 this 取用；在 events() 可以透過 event handler 的第二個參數取用；而在 helpers() 則可以透過 Template.instance() 取用。

• 在 onRendered() 中，模板物件可以透過 find, findAll, firstNode, lastNode, $ 來操作網頁元素；在 onCreated() 和 onDestroyed 則不行。

Blaze

• Blaze.render()：將模板插入 DOM，返回 View 物件

• Blaze.remove()：將 Blaze.render() 所返回的 View 物件從 DOM 移除

Spacebar

• 顯示模板：{{> 模板名稱}}

• 顯示 helper 所返回的值：{{helper 參數}}

• 搭配 helper 的模板標籤：

  • {{# if helper}} ... {{/if}}
  • {{# if helper}} ... {{else}} ... {{/if}}
  • {{# unless helper}} ... {{unless}}
  • {{# with helper}} ... {{/with}}
  • {{# each helper}} ... {{/each}}
  • {{# let hlper}} ... {{/let}}