在單個xHttpRequest中打包多個jQuery模板的最佳方法是什麼？

更新：挖到這個問題的另一天之後，我發現，當前的jQuery模板LIB提供沒有辦法做到這一點。 this article 描述了一個好方法。在單個xHttpRequest中打包多個jQuery模板的最佳方法是什麼？

我仍然想聽到任何這樣做的其他想法。上面鏈接的文章要求將返回的模板串插入到DOM中的。看起來好像離開這個DOM將是理想的，並且在瀏覽器上的開銷較少。想象一個大頁面，多個複合模板可能不會使用。儘管可能因爲模板被包裝在腳本標記中，但每個模板只有一個DOM項目？來吧，讓我們聽到一些想法...

使用jQuery template libs，什麼對多個相關的，比較小的模板相結合的最佳方式？每個單獨的模板需要單個<script>標籤嗎？在通過AJAX動態拉動這些模板的情況下呢？我能否以某種方式組合這些模板？

考慮以下幾點：

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl "#titleTemplate"}} 
    <tr class="detail"><td>Director: ${Director}</td></tr> 
</script> 

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class="title"><td>${Name}</td></tr> 
</script>

現在因爲這兩個模板非常密切的關係（和一個依賴於其他）它將使意義鞏固這些成一個單一的AJAX調用，並讓他們都一旦。我有一些想法，但我想知道是否有共同/最好的方法來做到這一點？目前，我拉HTML的一大塊，然後做一個.find（）來獲取HTML的具體peice的一個模板...例如：然後

var templatePackage = fancyAjaxCalltoGetTemplates();

「templatePackage」可能是這樣的：

<div id="templatePkg"> 
    <div id="movieTemplate"> 
    {{tmpl "#titleTemplate"}} 
     <tr class="detail"><td>Director: ${Director}</td></tr> 
    </div>  

    <div id="titleTemplate"> 
    <tr class="title"><td>${Name}</td></tr> 
    </div> 
</div>

話，我可以這樣做：

var titleTemplate = jQuery.template('titleTemplate', $(templatePackage).find('#titleTemplate'));

和

var movieTemplate = jQuery.template('movieTemplate', $(templatePackage).find('#movieTemplate'));

...讓我知道你在想什麼...你會怎麼做？

來源

2010-12-10 user406905

我也可以使用分隔符，並從單個響應中分割出一組模板。但必須有一個更優雅的方式來做到這一點與jQuery /模板 - 我缺少一些從模板文檔？ – user406905 2010-12-11 04:36:39

我_think_我在這裏跟着你......你只是想解決所有的模板首先加載到你的渲染頁面的問題，然後只選擇你需要的幾個？ – 2011-01-04 21:10:59

那就對了。我需要根據需要動態加載模板。 – user406905 2011-01-05 05:52:52

好的，我讀過你在這篇文章中引用的文章。正如我所看到的，他的方式可能是加載模板頁面的最佳方式之一。我唯一不喜歡的是可能出現的異步問題，尤其是。如果您需要在異步獲取返回之前立即執行一些模板...以及在返回某些內容之前可能發生的任何綁定問題。在幾個項目我已經做了我使用他的「古」 SSI（服務器端包含），但我只是用的東西更容易，如：

<% Response.WriteFile("this_page_template_file.html"); %>

你可以把它放在任何地方，你會放置一個標籤。就像他說的那樣，只需輸入您需要的模板，或者可以包含兩個模板：一個是包含常用項目的「基本」模板，第二個模板包含具有模板參考的特定於頁面的模板{{tmpl}} 。

這是否接近答案？ ;-)

來源

2011-01-04 21:26:47

這就是你最終做的事情嗎？您的服務器端頁面決定並響應。寫入模板文件？我還在爲這個問題尋找一個好的，乾淨的解決方案 – Vin 2011-03-01 18:02:58

我還沒有，但我打算以後再回頭重新設計（現在必須推出這個項目）。我希望它能夠讓我只加載我需要的特定頁面的東西，但現在性能足夠好，以至於它運行良好，而不是優雅。你知道我的意思？ – 2011-03-01 18:20:04

[首先，很好的問題。我喜歡這個話題]

我對插件「jquery-template-libs」沒有經驗，但是有一個特殊的輕量級javascript模板插件，幾乎成爲一個標準，並且與jQuery很好地搭配，這可能會更好適用於比JTL，鬍鬚任務：

https://github.com/janl/mustache.js

它有一些被稱爲「部分」，這實質上是一種方法，包括另外一個較小的範圍內模板。這聽起來像會幫助你很多。

最重要的是有一個庫調用ICanHaz.js：

http://icanhazjs.com/

ICanHaz基本上延伸小鬍子包括內置的功能，模板和成效斐然。

Mustache/ICanHaz允許您通過變量，通過json調用或使用標籤添加模板。這是你的選擇。

來源

2011-02-10 23:03:24 arnorhs

我知道這是一個老問題，但你可能想看看Closure-Templates。它們提供了您所追求的功能，並具有在編譯時編譯到JavaScript中而不是在每個用戶的瀏覽器運行時編譯到JavaScript中的優勢。

如果你決定研究使用它們，那麼我建議使用plovr來構建它們。

來源

2011-06-28 14:05:04 Chris

我喜歡你的更新中引用的文章，除非你不能緩存模板，除非你將它們插入到DOM中。從jQuery.tmpl documentation，

「要使用從一個字符串（而不是從頁面內標記），使用$.template(name, markup)來創建可重用命名模板獲取的標記時，緩存的模板。見jQuery.template()」。

使用這個，我們可以建立一個JavaScript模板管理系統，允許我們在保持DOM清潔的同時，根據需要一次加載多個模板。在客戶端上，按名稱保存模板對象的散列。您可以使用自己喜歡的對象基於此JavaScript的模式，但我認爲結構可能是這樣的：

templates[templateName] = { 
    templateMarkup: markupFromServer, 
    loadedAt: Date.now(), 
    compiledTemplateFunction: jQuery.template(templateName, markupFromServer) 
}

然後使用模板來生成HTML這樣的：

templates['unique-name'].compiledTemplateFunction(inputData)

然後，建立一個卸載機制來釋放內存：

function unload(templateName) { 
    delete templates[templateName]; 
    delete jquery.template[templateName]; 
}

更重要的是，你現在有存儲多個模板的方法。這樣你就可以做出這樣的請求：$.get('/TemplateManagement/Render', arrayOfTemplateNamesToLoad, loadManyTemplatesSuccess)到LO一次添加多個模板。我們唯一需要的是一個控制器TemplateManagement，它將一組模板名稱作爲輸入並返回JSON，將模板名稱與其標記進行配對。有幾種方法可以做到這一點，但在我看來最方便的是爲每個模板定義部分視圖。在ASP中。NET MVC 3，您可以使用this technique和RenderPartial將每個模板的標記發送到JSON響應中。您可以將部分視圖命名爲與模板相同或以某種自定義方式映射名稱。

來源

2011-06-28 15:01:05 Milimetric

yay，::拍自己的背部::。這是我最喜歡的答案。它會在某一天得到，它會讓世界變得更美好:) – Milimetric 2011-12-10 01:57:25

這正是我要採取的方法。再次拍拍你自己=） – 2013-07-30 17:14:02

:)完成。並且謝謝你，我愛StackOverflow。 – Milimetric 2013-07-30 22:08:35

在單個xHttpRequest中打包多個jQuery模板的最佳方法是什麼？

回答

相關問題