我正在编写一个应用程序，它从 AJAX JSON 响应中呈现“作业”对象列表。
从返回的数据中呈现标记的最佳方法是什么。现在我非常确信在服务器端生成 HTML 标记并从 AJAX 调用返回它是一个坏主意。根据经验，它使 HTML 难以维护，重构内容是一场噩梦，所以我将 Job 对象的集合作为 JSON 返回。
那么，问题是如何根据用户输入呈现 HTML？我已经看到了一些在页面上放置标记模板然后使用 JQuery 克隆它并填充相关数据并将其插入 DOM 的示例。
这样做的问题是模板包含可见内容（图像等）并且应用程序需要降级，所以我在页面上有一个转发器，如果 JS 不可用，服务器端代码和填充页面加载。
任何建议将不胜感激。
【问题讨论】：
标签： c# .net asp.net jquery ajax
John Resig（jQuery 哥们）做了一个超级简单的模板引擎，你可以在客户端使用它，Rick Strahl 有a good post 关于它。
Trimpath 有一个很棒的客户端模板解决方案，名为 Javascript Templates - 这不是最有想象力的名字，但它确实非常好。
我通常不做 google 链接，但是 asp.net ajax (4.0?) 有一些 client side templating 出来，可以让你获取 JSON 对象并将它们直接数据绑定。
如果做不到这一点，我将成为魔鬼的拥护者并说“语义 HTML 有什么问题”？。只要它是语义的，并且具有类而不是硬编码样式，我个人认为从服务器端调用返回 HTML 没有任何问题。当然，它不像其他解决方案那样纯粹，但它是一个更容易组合的该死的网站。在某些情况下，我什至发现它更容易维护，因为您让“服务器端编码器”返回带有嵌入式类的 HTML，而“客户端编码器”可以设置 6 种方式到星期天:-)
【讨论】：
根据数据的复杂性，使用 jQuery 对象构建 HTML 可能是可行的。这看起来仍然很漂亮，并且比编写原始 HTML 更易于维护：
$.ajax({
url: 'foo',
dataType: 'json',
success: function(data) {
var container = $('<div />')
.attr('id', 'container');
for(var i in data.items) {
var child = $('<div />')
.addClass('container-child');
var title = $('<p />')
.html(data.items[i].title)
.addClass('item-title');
var description = $('<p />')
.html(data.items[i].description)
.addClass('item-description');
child.append(title).append(description);
container.append(child);
}
// Remove existing container
$('div#container').remove();
// And replace it with the just created one
$('body').append(container);
}
});
此方法与使用“虚拟”HTML 元素、克隆该元素并使用正确的值填充子元素一样快。在我看来，这更清晰，更容易理解。
【讨论】：