javascript - 从 ajax 响应构建 html 有哪些选项？

Question

有哪些选项或库可用于从返回的 ajax 响应构建 html？

目前，我正在获取收到的 json 数据，将 html 构建为字符串，并使用 jQuery DOM 插入函数，但我必须认为有一种更好、更可维护的方法来完成我想要做的事情做。

例如，我有一个包含项目列表的页面，只有缩略图和标题，用户可以单击它们。单击项目并成功返回 json 请求后，将显示更详细的项目信息。目前我正在做的事情本质上是:

build_project = function(data){
  var projectHTML = "<div id='projectData_"+data.id+"'>"+data.contents+"</div>";
  return projectHTML;
}

然后将其插入到需要去的 DOM 中。当不止一个元素时就会出现问题，有时我必须创建多达 6-10 个不同的嵌套元素，其中会出现如下内容:

    projectHTML += "</div>";
  projectHTML += "</div>";
projectHTML += "</div>";

我知道 Mustache.js，但我不确定这是否正是我正在寻找的东西 - 以及是否还有其他我应该研究的选项。

谢谢!

Answer 1

您走在正确的道路上。看一下 jquery.tmpl 库。

http://api.jquery.com/jquery.tmpl/