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

从返回的Ajax响应中构建html有哪些选项或库？从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的，但我不确定这是否与我正在寻找或不一致 - 以及是否有其他选项需要我进行调查。

谢谢！

来源

2011-03-21 Scott

你是在正确的轨道上。看看jquery.tmpl库。

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

来源

2011-03-21 14:04:07 rcravens

还有很多其他的模板库可以考虑！ https://github.com/janl/mustache.js，https://github.com/wycats/handlebars.js，http://documentcloud.github.com/underscore/，仅举几例。模板绝对是一种可行的方式，并且有一个模板库的丰富生态系统。看一看，然后选择适合你的那个！ – idbentley 2011-03-21 14:22:58

非常感谢！一定会检查所有这些了！ – Scott 2011-03-21 14:32:19

您可以在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()（它只处理字符串插值），但你可以扩展它做的整数，浮点数，填充等

来源

2011-03-21 14:03:01 alex

你可以尝试http://knockoutjs.com/一起使用jQuery模板。

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

来源

2011-03-21 14:06:19 Peeter

如果您使用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在几个项目已经被证明是非常有用的，我一直在参与

来源

2011-03-21 14:35:48 Andreas

另一个选项，它也许更容易维护。可测试等将为您的远程功能本身（即通过ajax调用）返回格式化的html而不是数据。例如，在MVC中，例如ASP.NET MVC，您可以返回一个视图，并且脚本将原样获取这些数据，而无需操作它。

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

     return View("ViewName", model); 
    }

来源

2011-03-21 14:39:20 JML

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

回答

相关问题