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

您可以在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 3

您可以尝试使用http://knockoutjs.com/和JQuery模板。

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

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

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

Answer 5

另一个可能更易维护，可测试等的选项可能是你的远程函数本身（你通过ajax调用）返回格式化的html而不是数据。例如在MVC中，例如ASP.NET MVC，您可以返回一个视图，脚本将按原样获取该数据，而不必操纵它。

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

        return View("ViewName", model);
    }

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

5 个答案: