关于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的组件模型

评论

20 楼 fkpwolf 2010-03-08  

大家使用模板时遇到翻译的问题没有，google的closure templates刚好有这个功能，参考这里：http://code.google.com/intl/zh-CN/closure/templates/docs/translation.html

它是使用了一个叫XLIFF的一种标准格式来保存翻译文本，感觉还是很专业的。

如果这些模板在jsp中保持，用类似<%=t "name"%>来处理当然更容易，但是编译模板然后生成js的方法对效率会更好点，因为js可以缓存

19 楼 achun 2010-03-08  

我也推荐一个
俺写的前台模板 jCT 看专题吧
http://achun.iteye.com/category/33268

18 楼 rainchen 2010-03-07  

或者可以参考Firefox的模板语法特性（或者利用这个思路来置换模板的内容）：
http://www.w3schools.com/e4x/tryit.asp?filename=trye4x_demo

17 楼 rainchen 2010-03-07  

楼主可以看看这个模板：http://github.com/edspencer/jaml
Templating
Usually we want to inject data into templates – let’s see how to do that:

Jaml.register('product', function(product) {
  div({cls: 'product'},
    h1(product.title),

    p(product.description),

    img({src: product.thumbUrl}),
    a({href: product.imageUrl}, 'View larger image'),

    form(
      label({for: 'quantity'}, "Quantity"),
      input({type: 'text', name: 'quantity', id: 'quantity', value: 1}),

      input({type: 'submit', value: 'Add to Cart'})
    )
  );
});

And now to render it:

//this is the product we will be rendering
var bsg = {
  title      : 'Battlestar Galactica DVDs',
  thumbUrl   : 'thumbnail.png',
  imageUrl   : 'image.png',
  description: 'Best. Show. Evar.'
};

Jaml.render('product', bsg);

Which gives us:

<div class="product">
  <h1>Battlestar Galactica DVDs</h1>
  <p>Best. Show. Evar.</p>
  <img src="thumbnail.png" />
  <a href="image.png">View larger image</a>
  <form>
    <label for="quantity">Quantity</label>
    <input type="text" name="quantity" id="quantity" value="1"></input>
    <input type="submit" value="Add to Cart"></input>
  </form>
</div>

16 楼 fkpwolf 2010-03-07  

akandfxs 写道

hehe,我的理解，js相关的东西比如数据和模板，不一定是js编出来的，可以通过java,.net等生成。js这个东西其实模糊了前后台的界限的。其实你调用一个js函数，完全不必理会它是前段计算还是后端计算。

是的。我在试用模板时，发现模板中的数据其实很多要用代码产生出来，最常见的比如翻译文字。
所以这里有点像模板(json)的模板(jsp)

15 楼 akandfxs 2010-03-06  

hehe,我的理解，js相关的东西比如数据和模板，不一定是js编出来的，可以通过java,.net等生成。js这个东西其实模糊了前后台的界限的。其实你调用一个js函数，完全不必理会它是前段计算还是后端计算。

14 楼 fkpwolf 2010-03-05  

jindw 写道

fkpwolf 写道

jindw 写道

fkpwolf 写道

jindw 写道

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

http://lite.googlecode.com

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

无语了，可怜的纯前端工程师。

我这样认为：既然json已经在client端用模板来生成html，server端难道还要用模板来render json？如果后端模板指jsp, rails之类，那应该跟前端模板关系不大，它只管生成json。

错误之处请赐教。

定势思维害死人。
前后端的分工并不应该局限在是否在浏览器上运行。
而应该更多关注某种逻辑是否与展现相关。

这，不是很明白，我就不揣摩圣衣了。

13 楼 jindw 2010-03-05  

fkpwolf 写道

jindw 写道

fkpwolf 写道

jindw 写道

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

http://lite.googlecode.com

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

无语了，可怜的纯前端工程师。

我这样认为：既然json已经在client端用模板来生成html，server端难道还要用模板来render json？如果后端模板指jsp, rails之类，那应该跟前端模板关系不大，它只管生成json。

错误之处请赐教。

定势思维害死人。
前后端的分工并不应该局限在是否在浏览器上运行。
而应该更多关注某种逻辑是否与展现相关。

12 楼 fkpwolf 2010-03-05  

jindw 写道

fkpwolf 写道

jindw 写道

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

http://lite.googlecode.com

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

无语了，可怜的纯前端工程师。

我这样认为：既然json已经在client端用模板来生成html，server端难道还要用模板来render json？如果后端模板指jsp, rails之类，那应该跟前端模板关系不大，它只管生成json。

错误之处请赐教。

11 楼 jindw 2010-03-04  

fkpwolf 写道

jindw 写道

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

http://lite.googlecode.com

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

无语了，可怜的纯前端工程师。

10 楼 weiqiang.yang 2010-03-04  

google的jst也不错，项目在用~~

9 楼 fkpwolf 2010-03-04  

jindw 写道

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

http://lite.googlecode.com

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

8 楼 upup1000 2010-03-04  

Ext的XTemplate，功能也不弱

7 楼 upup1000 2010-03-04  

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);

6 楼 jindw 2010-03-03  

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

http://lite.googlecode.com

5 楼 faiinlove 2010-03-03  

fkpwolf 写道

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

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

4 楼 kuchaguangjie 2010-03-03  

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

3 楼 fkpwolf 2010-03-03  

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

2 楼 faiinlove 2010-03-03  

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

1 楼 lxy19791111 2010-03-03  

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