javascript - 在单个 xHttpRequest 中打包多个 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 - 在单个 xHttpRequest 中打包多个 jQuery 模板的最佳方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4414294/

相关文章:

javascript - 在调试控制台代码上设置断点

javascript - 将图标添加到js.erb.html中的link_to吗?

php - 正文中有url标记时,PHP邮件无法发送

javascript - 如何编码JQuery,以便当我滚动到某个元素时,导航栏出现在顶部,当我向上滚动到该元素上方时,导航栏会消失

javascript - 无限 Webpack 监视循环 - 如何忽略对 .js 文件等的更改

javascript - 修复无效 JSON 的最有效方法

javascript - ReactJS 组件将文件上传到 Spring MVC/Data-REST 服务器

javascript - 检测浏览器中的选项卡开关和浏览器中的应用程序开关

jquery - jQuery :eq(index) selector

php - 向下滚动时切换 Logo