关于json template一点思考

如果ajax调用从server返回的是json，那么client如何把json render成html呢？

 

我看到一个叫json-template的js库，比如如下的代码，有点像xslt转换xml

 

{# This is a comment and will be removed from the output.}

{.section songs}
  <h2>Songs in '{playlist-name}'</h2>

  <table width="100%">
  {.repeated section @}
    <tr>
      <td><a href="{url-base|htmltag}{url|htmltag}">Play</a>
      <td><i>{title}</i></td>
      <td>{artist}</td>
    </tr>
  {.end}
  </table>
{.or}
  <p><em>(No page content matches)</em></p>
{.end}

不过这样感觉有点把事情复杂化了，我本意只是想把json转换成html。

 

难道应该从server端直接传回html么？

 

从server端直接传回HTML有个缺点，就是html只是用来显示（view）的，如果我们用html来传递所有的数据，势必有些数据要放到hidden的element中，这样html看起来很混乱。如果不放到hidden input中，也可以放到element attribute或者class中，少量的数据可以，多了就显得有点怪异了，影响了HTML语义semantical，这里有解释。HTML5中有些改进，不过我看也不是很优雅的解决方法。

 

放到json中的话作为一个统一的model来交给ajax（control)来处理。

 

感觉我需要的是一个mvc的javascript框架，我知道dojo中也有templete的东东，不过我不大熟悉，不知道是否解决了这个问题。(这里有篇如何创建widget的文章，感觉正是我需要的)。dojo包装的比较深，我不大明白其底层是用何种机制来保存这些数据的。其实数据保存在那里无关紧要（在firebug中可以看到，还是保存在DOM中），更重要的是要建立对象（widget)和标准HTML的bind关系。

 

Using template in Django ? 这篇文章也同意我的观点，他用到了一个叫jBind的emplate engine

google也有个tool叫closure-templates，跟一般的模板不同的是它可以把模板文件编译成javascript，这样性能就更好些。

 

关于dojo的东西后续讨论我放到了我的博客这里：

从“在HTML中嵌入数 据”到Dojo的组件模型

楼主可以看看这个jTemplates，这是一个jQuery模板插件，功能非常将大，就像客户端的FreeMarker，我用过感觉不错，网址：http://jtemplates.tpython.com/

对于json数据刷新到模版，我建议楼主参考一下adobe的spry框架，完全符合楼主的需求。而且不大的一个框架。完全可以和其他js库混用。。 

多谢提醒。不过现在我发现使用templete后，json还是没有bind到html，要bind还得手工做。比如取html里面的值，根原来的json就脱离了。感觉dojo这方面还是很强的，以widget或者component方式来处理html，比较单薄的templete更容易处理。

法一，返回 html/jsp 片段
法二，返回json后，自己用 js 操作之
法三，用 json 库，比如 json-taglib，和你说的 json-template

Adobe的Spry框架就是bind到html的·· 而且支持复杂的bind。而且datastore刷新后html会跟着刷新，是个不错的东西！ 而且支持多种datastore格式，包括json，xml，html！ 而且2行代码就可以出来数据了。而且支持主从数据。
现在想来，它的功能真多啊。而且DW Cs3 就自带了！

前端模板必须借助后端模板这个平台才能发展起来。
对前端模板感兴趣的同学可以试试这个：

http://lite.googlecode.com

var tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="this.isGirl(name)">',
            '<p>Girl: {name} - {age}</p>',
        '</tpl>',
        '<tpl if="this.isGirl(name) == false">',
            '<p>Boy: {name} - {age}</p>',
        '</tpl>',
        '<tpl if="this.isBaby(age)">',
            '<p>{name} is a baby!</p>',
        '</tpl>',
    '</tpl></p>', {
     isGirl: function(name){
         return name == 'Sara Grace';
     },
     isBaby: function(age){
        return age < 1;
     }
});
tpl.overwrite(panel.body, data);

Ext的XTemplate，功能也不弱

server端也要模板么？难道生成json也要模板？