在 jQuery 中处理 JSON 和 HTML 模板答案

【问题标题】：Handling JSON and HTML templates in jQuery在 jQuery 中处理 JSON 和 HTML 模板
【发布时间】：2010-04-19 13:53:02
【问题描述】：

如何在不将 HTML 锁定为 javascript 字符串的情况下处理 HTML 和 JSON 模板？

我有一个支持 ajax 的网站，它通过使用 HTML 插入 JSON 值来呈现大量动态内容。这一切都很好。

但这意味着我的 JavaScript 中有大量的 HTML。例如：

var template = "<div>Foo: {bar}</div><div>Blah: {vtha}</div>";          
template.interpolate({bar:"bar",blah:"vtha"});

我已经把它减少了一点——我的一些动态元素有很多 HTML 和很多东西。

我正在使用 jQuery，并且我在 Rails 上进行构建，所以如果任何一个框架中都有一些智能的东西，那就太好了。

供参考，上面使用的String插值函数为：

String.prototype.interpolate = function (o) {
    return this.replace(/{([^{}]*)}/g,
        function (a, b) {
          var r = o[b];
          return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

【问题讨论】：

那么...问题是什么？您是在问如何在不将 HTML 锁定为 javascript 字符串的情况下执行此操作吗？
插值是一个潜在的安全问题。因为它不是 HTML 转义文本字符串，所以您最终在页面上放置的任何不受信任的输入都可以将标记（包括 JavaScript）注入页面的安全上下文中。你犯了客户端 XSS 风险。
@peter：说得好，比我的问题要简洁得多。
@bobince：这里没有风险，数据都是可信的。

标签： javascript jquery html ruby-on-rails templates

【解决方案1】：

我肯定会使用“需要时加载”的方法。

构建您可以使用 ajax 加载的小部件，其中包含 html、数据等。使用jquery的加载函数。

$('#wrapper').load('/widgets/foobar/')

让服务器创建您需要的所有元素。将为每个小部件加载更多数据。但是您不必在客户端创建它们。我会说专业人士胜过这方面的劣势。因为客户端只需添加已经解析的 html 而不是在 javasccrtipt 中构建它会更容易。

【讨论】：

【解决方案2】：

您是否尝试过使用Distal templates 允许您将模板定义为 HTML。

【讨论】：

【解决方案3】：

如果您想将 HTML 模板代码保留在 HTML 中而在 JavaScript 之外，那么只需执行以下操作即可。

Javascript：

$(document).ready(function() { var template = $('#template-example').html(); template.interpolate({bar:"bar",blah:"vtha"}); });

HTML：

<div id="template-example" style="display:none;"> <div>Foo: {bar}</div><div>Blah: {vtha}</div> </div>

【讨论】：