有没有比构建字符串和设置innerHTML更好的填充HTML小部件的方法？

使用XML XSLT，可以在HTML中构建一个漂亮的模板，将其转换为XSLT并使用来自服务器的xml数据动态填充客户端的小部件。有没有比构建字符串和设置innerHTML更好的填充HTML小部件的方法？

JSON和JSONP非常适合与服务器端交互并操纵JS中的数据。当谈到渲染JSON数据时，我见过的大多数例子都是使用JS来连接一个丑陋的字符串，并设置一些元素的innerHTML来渲染它。

有没有一种简单的浏览器兼容的方式来创建html小部件并使用JSON填充它们，而不涉及串激活或构建DOM元素负载？

2010-08-19 MandoMando

你有没有试过JS框架[jQuery]（http://jquery.com/）？ – NullUserException 2010-08-19 17:21:42

@NullUserException是的，jQuery很好，但它自己似乎没有提供解决方案，只是使它更容易。我相信性能也会受到影响（例如，在手机浏览器上很受欢迎）。 @ Dave的建议使用JQuery，并且更接近。我很困惑，不应该有JSON的等效XSLT转换吗？ – MandoMando 2010-08-19 17:54:20

这里似乎有一个很好的讨论：http://ajaxpatterns.org/Browser-Side_Templating – MandoMando 2010-08-19 18:43:43

正如其他答案中所提到的，您正在寻找的是基于JavaScript的模板语言。在这related question有一个很好的名单。为了突出一对夫妇，mustache干净，简单，并移植到许多许多语言。我相信它被Twitter使用。 Google Closure有template language，可以在JavaScript和Java中使用。 Google显然已经进行过测试。

其他主要的JS库都有模板作为插件或库的一部分。我知道jQuery至少有一个插件，并正在计划v1.5的路线图。 Dojo有一个clone of Django's templating language，看起来不错。

还有其他的，但我认为这将是作物的精华。

我实际上没有使用任何这些，因为我使用的是家庭成员，但是我可以告诉你他们非常好用，我强烈建议他们通过字符串连接或在服务器上做更多工作。

来源

2010-08-19 20:27:52

你可以使用jQuery和某种模板的jQuery插件。例如http://ivorycity.com/blog/jquery-template-plugin/（看看这个页面，也有一些很好的样本）

来源

2010-08-19 17:32:28 davehauser

您应该看到约翰Resiq这篇博客文章：JavaScript Micro-Templating

它有一个简单的微模板代码，你可以重新使用。它是这样的：

// Simple JavaScript Templating 
// John Resig - http://ejohn.org/ - MIT Licensed 
(function(){ 
    var cache = {}; 

    this.tmpl = function tmpl(str, data){ 
    // Figure out if we're getting a template, or if we need to 
    // load the template - and be sure to cache the result. 
    var fn = !/\W/.test(str) ? 
     cache[str] = cache[str] || 
     tmpl(document.getElementById(str).innerHTML) : 

     // Generate a reusable function that will serve as a template 
     // generator (and which will be cached). 
     new Function("obj", 
     "var p=[],print=function(){p.push.apply(p,arguments);};" + 

     // Introduce the data as local variables using with(){} 
     "with(obj){p.push('" + 

     // Convert the template into pure JavaScript 
     str 
      .replace(/[\r\t\n]/g, " ") 
      .split("<%").join("\t") 
      .replace(/((^|%>)[^\t]*)'/g, "$1\r") 
      .replace(/\t=(.*?)%>/g, "',$1,'") 
      .split("\t").join("');") 
      .split("%>").join("p.push('") 
      .split("\r").join("\\'") 
     + "');}return p.join('');"); 

    // Provide some basic currying to the user 
    return data ? fn(data) : fn; 
    }; 
})();

所以，你的模板将在标记：

<script type="text/html" id="item_tmpl"> 
    <div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>"> 
    <div class="grid_1 alpha right"> 
     <img class="righted" src="<%=profile_image_url%>"/> 
    </div> 
    <div class="grid_6 omega contents"> 
     <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p> 
    </div> 
    </div> 
</script>

要使用它：

var results = document.getElementById("results"); 
results.innerHTML = tmpl("item_tmpl", dataObject);

需要明确的是 - 上面的例子是取自博客文章，并且是不是我的代码。点击链接了解更多信息。

来源

2010-08-19 17:34:17 donohoe

有没有比构建字符串和设置innerHTML更好的填充HTML小部件的方法？

回答

相关问题