JAVASCRIPT網頁應用程式設計

檢視器（View）與模版（Template）

|

83

每一套模版函式庫，都不可能缺少迴圈的功能。JS 模版函式庫能讓你利用

{{each}}

關

鍵字跑迴圈掃視任意一組 JavaScript 物件或陣列。如果傳入

{{each}}

的是物件，它會逐

一掃視物件裡的每組屬性值；如果傳入

{{each}}

的是陣列，它會逐一掃視陣列中的每筆

索引值。

在

{{each}}

的程式區塊裡，可以利用

$value

變數存取目前迴圈正掃視到的某筆資料

值。如果想要直接顯示這筆資料值的內容，可以仿照先前範例的做法：用

${$value}

。

舉例來說，假設有個如下的物件：

var object = {

foo: "bar",

messages: ["Hi there", "Foo bar"]

};

就可以利用接下來這段模版範例程式，跑迴圈掃視

messages

陣列，並在網頁顯示陣列裡

的每組訊息。此外，還可以利用

$index

變數取得目前迴圈正在處理的陣列索引值。

<ul>

{{each messages}}

<li>${$index + 1}: <em>${$value}</em></li>

{{/each}}

</ul>

由前面幾段範例程式不難看出，jQuery.tmpl 這套模版 API 是多麼的簡單易學。其實其他

大部分模版函式庫的 API，都和 jQuery.tmpl 大同小異，只不過其他的函式庫，可能會提

供更多進階功能（像是 Lambdas、Partials，以及註解…等）。

模版輔助函式

有時會需要讓檢視器使用一些通用的輔助函式 ...