Javascript MVC —— View

 

原文：http://javascriptmvc.com/docs.html#&who=jQuery.View

翻譯：劉貴學(liuguixue@gmail.com)

 

 

 

藉助jQuery，View使用模板提供了統一的介面，使用註冊的模板引擎，您可以：

• View中使用jQuery擴充，after,append, before, html, prepend, replace,replaceWith, text.；
• 模板，載入html元素以及外部檔案；
• 同步與非同步模板載入；
• 模板緩衝；
• 在產品編譯時間，編譯並處理模板；
• 在模板中直接調用jQuery外掛程式

使用

當使用view時，您會常需要將模板填充的結果加到網頁中，jQuery.View重寫了jQuery的修飾符，因此使用view可以非常簡單，如下：

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

以上代碼:

•  載入模板 'mytemplate.ejs'，模板內容如下:

 

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

 

• 使用{message: 'hello world'}填充模板，結果如下：

 

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

 

•  將結果賦給foo元素，foo元素如下：

 

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

 

jQuery 修飾符

您可以在模板中使用以下jQuery修飾符：

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

這些jQuery的修飾符一般需要您傳遞一個字串和一個對象給模板。

模板的位置

View可以從指令碼標記或檔案中載入模板.

 

從指令碼中載入

可使用如下方式建立模板的指令碼標記：

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

填充此模板如下:

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

注意：我們將需要填充的元素id傳入。

 

從檔案載入

 

您可以傳遞模板的路徑，如下：

$("#foo").html('templates/recipes.ejs',recipeData) 

但是，我們經常需要模板的相對路徑（統一相對於根路徑而言），可使用// 來得到JMVC的根路徑：

$("#foo").html('//app/views/recipes.ejs',recipeData) 

最後，[jQuery.Controller.prototype.view
controller/view]外掛程式可使路徑的尋找更簡單：

$("#foo").html( this.view('recipes', recipeData) ) 

模板打包

如有您使用比較多的模板，您想以檔案的形式將它們組織好，以便在頁面或應用間複用。

但是，這種方式的代價也是比較大的，如果瀏覽器檢單獨索每個模板，這些額外的http請求會使您的應用變慢。

幸運的是，steal.views 可將模板編譯到您的產品檔案，您只需按如下方式指出view檔案即可：

steal.views('path/to/the/view.ejs');

非同步

預設情況下，請求是以同步（需要等待）的方式完成的。也沒關係，因為StealJS會將view模板打包到您的JS一起下載。

然而，有人並沒使用StealJS，或只是想等需要的時候再載入模板，如果您有這些需求，您可以提供一個回呼函數作為參數，如下：

$("#foo").html('recipes',recipeData, function(result){<br /> this.fadeIn()<br />}); 

回呼函數會與填充的模板結果一起調用，並通過'this'傳給原有的jQuery對象。

模板填充

有時，您只需要擷取填充過的模板，並不賦給其他元素，您可以使用$.View:

var out = $.View('path/to/template.jaml',{}); 

模板預先載入

您可以非同步預先載入模板，如下：

$.View('path/to/template.jaml',{}, function(){}); 

已支援的模板引擎

JavaScriptMVC 可以支援以下範本語言:

•  EmbeddedJS

 

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

•  JAML

h2(data.message); 

• Micro

<h2>{%= message %}</h2> 

• jQuery.Tmpl

<h2>${message}</h2> 

比較流行的Mustache 引擎會在第二階段加入。

使用其他的模板引擎

基礎您喜歡的模板到$.View與steal是非常簡單的，詳情請閱讀jQuery.View.register.

 

建構函式

模板的尋找，處理，緩衝，使用資料填充以及其他輔助函數，使用StealJS，可以在編譯產品時將模板與view合起來，同步的方式，使用view是沒有問題的，如下：

 

$.View("//myplugin/views/init.ejs",{message: "Hello World"}) 

 

如果您沒有StealJS的話，最好用非同步方式使用view，如下：

 

$.View("//myplugin/views/init.ejs",<br /> {message: "Hello World"}, function(result){<br /> // do something with result<br />})<br />new $.View(view, data, helpers, callback) -> String 

 

•  view {String}

模板源檔案的url或id

•  data {Object}

傳給view的資料.

•  helpers {optional:Object}

輔助函數（可選），view中可能會用到，並非所有的模板都支援。

• callback {optional:Object}

回呼函數（可選），如果有，此模板以非同步方式載入，如果你沒有將模板壓縮到你的view中，推薦使用。

•  returns {String}

View的填充結果。