从 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/

Answer 2

你可以试试http://knockoutjs.com/ 和 JQuery 模板。

“Knockout 是一个 JavaScript 库，可帮助您使用干净的底层数据模型创建丰富的响应式显示和编辑器用户界面。任何时候您的 UI 部分都可以动态更新（例如，根据用户的操作或何时更改）外部数据源发生变化），KO 可以帮助您更简单、更易维护地实现它。”

Answer 3

您可以在 JavaScript 中创建 printf 样式方法。

您可以危险地生活并扩展String 对象（幸运的是我几天前写了这个）...

String.prototype.printf =  function() {

    var theseArguments = Array.prototype.slice.call(arguments).reverse(),
        argumentsLength = theseArguments.length,
        str;

    str = this.replace(/%s/g, function() {
        return theseArguments[--argumentsLength];   
    });   

    return str;

};

jsFiddle.

...或者干脆把它变成一个普通的函数，或者将它的命名空间伪装成util.printf = function() { ... }。

当然，上面的函数并不是真正的printf()（它只处理字符串插值），但你可以扩展它来处理整数、浮点数、填充等。

Answer 4

如果您使用的是 ASP.Net，并且如果您不需要客户端上的 JSON 结果（除了执行 DOM 插入），您可以在服务器上呈现 html。

然后您可以利用您的编程语言功能来构建 html。

最后，您返回 HTML 字符串并将其附加到您的 DOM。

例如，您可以像这样创建 DOM 元素：

var panel = new Panel();
var label = new Label { Text = data.contents };
panel.Controls.Add(label);

return panel.ToHtml(); //use stringwriter

这个技巧在我参与的几个项目中被证明非常有用。

Answer 5

另一个可能更易于维护、可测试等的选项是让您的远程函数本身（您通过 ajax 调用）返回格式化的 html 而不是数据。例如在 MVC 中，例如 ASP.NET MVC，您可以返回一个视图，脚本将按原样获取此数据，而无需对其进行操作。

[AcceptVerbs((HttpVerbs.Get))]
    public ActionResult GetView(string param1)
    {
        var model = new ModelXXX;
        ...
        ...

        return View("ViewName", model);
    }