javascript - 在单个 Http 请求中打包多个 jQuery 模板的最佳方法?

标签 javascript jquery ajax templates jquery-templates

Update: after another day of digging into this issue, I have found that the current jQuery template lib provides no way to do this. this article describes a good approach.

I would still like to hear of any additional thoughts on doing this. The article linked above requires that the returned string of templates be inserted into the DOM. Seems as though leaving the DOM out of this would be ideal, and less overhead on the browser. Imagine a large page, with multiple composite templates that may not get used. Although, maybe because the templates are wrapped in a script tag, there is only a single DOM item per template? Come on, let's hear some thoughts...

使用 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 部分......例如:

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') );

...让我知道您的想法...您会怎么做?

最佳答案

我喜欢你更新中引用的文章,除了假设你不能缓存模板,除非你将它们插入到 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) 一次加载多个模板时间。我们唯一需要的是一个 Controller TemplateManagement,它将模板名称数组作为输入并返回将模板名称与其标记配对的 JSON。有几种方法可以做到这一点,但在我看来最方便的是为每个模板定义部分 View 。在 ASP.NET MVC 3 中,您可以使用 this techniqueRenderPartial 将每个模板的标记发送到 JSON 响应中。您可以将部分 View 命名为与模板相同的名称,或者以某种自定义方式映射名称。

关于javascript - 在单个 Http 请求中打包多个 jQuery 模板的最佳方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4414294/

相关文章:

javascript - 页面上的表格太多 - 这是一个问题吗

javascript - 如何在 onClick 时不在按钮的文本上应用动画?

javascript - 如何在 nuxt.js 中导入 wavesurfer?

php - JQuery 无法在 Ajax 加载页面中工作

javascript - ajax 调用如何将数据返回给变量?

php - 我如何用 PHP 乘以价格并在末尾保留零?

android - Cordova/Phonegap 所有外部 Ajax 请求返回 404

javascript - 从 JavaScript 将日期传递给 ADODB.Command 参数

javascript - AngularJS 使用路由参数进行客户端包含的方法是什么?

jquery - IE 中的圆 Angular : VML vs jQuery