JAVASCRIPT網頁應用程式設計

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

|

81

就可以利用 jQuery 的選取項來更新檢視器內容，或是將檢視器裡的一些網頁元件，設定

為顯示或隱藏狀態：

$("#views div").hide();

var container = $("#views .user");

container.find("span").text(data.name);

container.show();

這是動態產生網頁元件的較佳做法，因為這種做法能將檢視器和控制器之間的權責，劃

分得更加清楚。

模版（Template）

如果你曾經在 HTML 程式碼裡面，安插過一些伺服器端程式語言的變數，相信應該不會

對模版的概念感到陌生。雖然目前可供選用的模版函式庫種類相當的多（該選用哪種模

版函式庫，應依目前選用的 DOM 函式庫而定），但它們所使用的語法其實都大同小異。

本章稍後，將會更詳細的介紹一些模版函式庫語法。

JavaScript 模版的重點在於：讓你可以在 HTML 程式碼裡面安插一些模版變數、將模版

變數和某個 JavaScript 物件整合在一起（也就是利用 JavaScript 物件的屬性值，來置換

這些模版變數的值）。整體而言，JavaScript 模版的運作方式，和其他程式語言的模版函

式庫（像：PHP 的 Smarty、Ruby 的 ERB，以及 Python 的 string formatting）並無二致。

本章稍後在解說模版概念時，所採用的範例程式碼是搭配 jQuery.tmpl 函式庫（

http:// ...