javascriptMVC教程 — 9.開始使用jQueryMX–View

　　JavaScriptMVC的views就是用戶端模版，用來提取資料和返回字串。一般情況下，這個字串就是用於插入到DOM中的html代碼。$.View是一個模版介面，使用模版完成複雜的工作：

• 方便和統一的文法
• 從html元素或者外部檔案載入模版
• 同步或者非同步載入模版
• 與載入模版
• 緩衝或者處理模版
• 產品編譯的過程中綁定模版
• 對$.Deferred 的支援

　　javascriptMVC預先打包了4種不同的模版引擎：EJS、JAML、Micro和Tmpl。下面的教程將使用EJS模版引擎，但是對於其他引擎也是適用的，只是需要你對代碼做少量修改。

 

　　基本應用

　　當使用視圖的時候，你總是需要把模版渲染的結果插入到頁面中，$.View重寫了jquery的modifiers，你可以很容易的使用視圖：

$("#foo").html('mytemplate.ejs',{message: 'hello world'})

上面的程式碼完成了下面三步工作：

1.從mytemplate.ejs中載入模版，模版內容如下：

<h2><%= message %></h2>

2.使用{message: 'hello world'}渲染結果：

<h2>hello world</h2>

3.把結果插入到頁面中的foo元素中，結果如下：

<div id='foo'><h2>hello world</h2></div>

 

　　jQuery Modifiers

　　你可以使用下面的jquery modifiers方法使用模版：

$('#bar').after('temp.ejs',{});$('#bar').append('temp.ejs',{});$('#bar').before('temp.ejs',{});$('#bar').html('temp.ejs',{});$('#bar').prepend('temp.ejs',{});$('#bar').replaceWith('temp.ejs',{});$('#bar').text('temp.ejs',{});

 

　　從scripts標籤載入

　　View可以從scripts標籤或者外部檔案載入模板，使用scripts標籤的方式需要添加type屬性，內容為text/ejs，同時需要添加一個id屬性，如下：

<script type='text/ejs' id='recipesEJS'><% for(var i=0; i < recipes.length; i++){ %>  <li><%=recipes[i].name %></li><%} %></script>

 像下面這樣使用，第一個參數為scripts標籤的id：

$("#foo").html('recipesEJS', recipeData)

 

　　$.View和子模板

　　有時候你只想渲染字串，可以使用$.View(TEMPLATE , data )完成工作，向$.View傳送模板的路徑和需要顯示的資料：

var html = $.View("template/items.ejs", items );

最常用的例子是子模板，從項目模板中分離出子模板，我們會使用template/items.ejs中的內容來呈現每一個資料：

<% for( var i = 0; i < this.length; i++){ %>  <li>    <%= $.View("template/item.ejs", this[i]);    </li>< % } %>

在這個例子中this指向傳遞給模板的資料，在這個例子中this指向items數組，他會使用template/item.ejs呈現自己的每一條資料。

 

　　延時

　　使用ajax請求，然後使用模板呈現結果是相當普遍的作法，使用$.Model章節中的Task模板，我們可以用下面的方式展現task：

Task.findAll({}, function(tasks){  $('#tasks').html("views/tasks.ejs" , tasks )})

　　$.View執行$.Deferred，允許使用非常強大的、簡潔的、高效能的文法。如果deferred在$.View的資料中或者在jQuery modifiers中，$.View會非同步載入模板，等到deferreds和模板完全載入完畢之後才會渲染模板。Model的方法findAll, findOne, save 或者 destroy 返回deferreds，我們可以把渲染的代碼寫到一行。

$('#tasks').html("views/tasks.ejs" , Task.findAll() )

可以使用多個deferreds： 

$('#app').html("views/app.ejs" , {  tasks: Task.findAll(),  users: User.findAll()})

 

　　打包、預先載入和效能

　　預設情況，$.View是同步載入模版的，這是因為它預計你已經完成了下面這些工作：

• 把模版放在 script 標籤中；
• JavaScript編譯的時候完成模版的打包；
• 預先載入模版。

　　JavaScriptMVC不推薦把模版放在script標籤中，因為在多個應用程式中這種方式不利於重用。他同樣不利於系統效能，除非你需要立即載入模版。JavaScriptMVC推薦把初始化時需要使用的模版和javascript打包在一起，其他模版在用的時候再載入。StealJS, JavaScriptMVC編譯系統可以處理和打包模版，把壓縮後的檔案添加到最終產品中，使用steal.views(PATH, ...)指向你需要的模版。

steal.views('tasks.ejs','task.ejs');

　　然後，當$.View查詢模版的時候，他會使用一個緩衝的版本，以避免額外的ajax請求。對於那些不需要立即使用的模版，可以使用jQuery.get預先載入和緩衝他們，只需要簡單的提供一個url和視圖的資料類型。最好在初始化頁面之後執行這個操作。

$(window).load(function(){  setTimeout(function(){    $.get('users.ejs',function(){},'view');    $.get('user.ejs',function(){},'view');  },500)})

 

 

javascriptMVC教程目錄