用模板引擎Art-Template渲染空格或换行符引发的一场“命案”

一、绪论

说实话，真的不知道如何给这篇博客命名，因为我觉得应该有一些小伙伴遇到跟我同样的问题正在抓耳挠腮中。

二、导火索

最近在做一个移动H5翻页的功能，类似于MAKA模板那种。假设大致框架如下

第一页是首页，第二页开始就是要动态添加的地方，所以红框里面的样式类，是从2开始的，这是第一个伏笔。

初始代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>命案</title>

</head>

<body>

    <div class="sec_1">

        <p>首页</p>

    </div>

    <div class="sec_2">

        <p>张三</p>

        <p>性别：男；联系方式：123；地址：广州；</p>

    </div>

    <div class="sec_3">

        <p>李四</p>

        <p>性别：女；联系方式：321；地址：深圳；</p>

    </div>

    <div class="sec_4">

        <p>王五</p>

        <p>性别：男；联系方式：213；地址：佛山；</p>

    </div>

</body>

</html>

这个看起来用Art_Template模板引擎很容易就能实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>命案</title>

    <script type="text/javascript" src="template-web.js"></script>

</head>

<body id="content-area">

</body>

<script id="tem" type="text/html">

    <div class="sec_1">

        <p>首页</p>

    </div>

    {{each page value index}}

    <div class="sec_{{index+2}}">

        <p>{{value["name"]}}</p>

        <p>性别：{{value["sex"]}}；联系方式：{{value["tel"]}}；地址：{{value["address"]}}；</p>

    </div>

    {{/each}}

</script>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript">

    var data={

        page:[{

            name:"张三",

            sex:"男",

            tel:"123",

            address:"广州"

        },{

            name:"李四",

            sex:"女",

            tel:"321",

            address:"深圳"

        },{

            name:"王五",

            sex:"男",

            tel:"213",

            address:"佛山"

        }]

    }

    var html = template('tem', data);

    $('#content-area').html(html);

</script>

</html>

用模板引擎渲染效果一模一样。

当我兴高采烈地把这段代码交给后台开发A的时候，A说，出于种种原因你把数据格式改成下面这样吧，我才比较好处理接下来的工作。

var data={

        page:[["张三","男","123","广州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]

    }

好吧，反正原理都一样，修改之后代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>命案</title>

    <script type="text/javascript" src="template-web.js"></script>

</head>

<body id="content-area">

</body>

<script id="tem" type="text/html">

    <div class="sec_1">

        <p>首页</p>

    </div>

    {{each page value index}}

    <div class="sec_{{index+2}}">

        <p>{{value[0]}}</p>

        <p>性别：{{value[1]}}；联系方式：{{value[2]}}；地址：{{value[3]}}；</p>

    </div>

    {{/each}}

</script>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript">

    var data={

        page:[["张三","男","123","广州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]

    }

    var html = template('tem', data);

    $('#content-area').html(html);

</script>

</html>

问题来了，现在的需求是，假如地址太长了，需要换行。这还不简单，在需要换行的地方加入<br/>不就行了嘛。

var data={

        page:[["张三","男","123","广<br/>州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]

    }

但是最后发现还是我太天真了，无论是<br/>还是\n甚至是&在模板引擎渲染出来之后都是类似这样的

压根就是当做字符串了，而且暂时来说我还找不到方法可以解决这个问题，“命案”由此发生。

三、探寻之路

用新的模板引擎Handlebars来解决。上面所示的案例，表达式中的任何html代码将会被自动忽略，但是有时候我们需要解析html标签，那么就要用三个花括号{{{ }}}来解决这个问题。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>命案</title>

    <script type="text/javascript" src="handlebars.js"></script>

</head>

<body id="content-area">

</body>

<script id="address-template" type="text/x-handlebars-template">

    <div class="sec_1">

        <p>首页</p>

    </div>

    {{#each page}}

    <div class="sec_{{@index+2}}">

        <p>{{@key[0]}}</p>

        <p>性别：{{@key[1]}}；联系方式：{{@key[2]}}；地址：{{{@key[3]}}}；</p>

    </div>

    {{/each}}

</script>  

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript">

$(function () {

  // 抓取模板数据

  var theTemplateScript = $("#address-template").html();

  // 编译模板

  var theTemplate = Handlebars.compile(theTemplateScript);

  // 定义数据

  var data={

        page:[["张三","男","123","广<br/>州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]

    }

  // 把数据传送到模板

  var theCompiledHtml = theTemplate(data);

  // 更新到模板

  $('#content-area').html(theCompiledHtml);

});

</script>

刚运行就出错了。因为这个模板刚上手，所以其实在官网里面，我找不到有在{{}}符号里面进行运算的写法

最后发现有Helper这个东西，其实就是类似写一个过滤器，你想把数据过滤成什么样子都可以通过编辑这个Helper

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>命案</title>

    <script type="text/javascript" src="handlebars.js"></script>

</head>

<body id="content-area">

</body>

<script id="address-template" type="text/x-handlebars-template">

    <div class="sec_1">

        <p>首页</p>

    </div>

    {{#each page}}

    <div class="sec_{{formatnumber @index}}">

        <p>{{@key[0]}}</p>

        <p>性别：{{@key[1]}}；联系方式：{{@key[2]}}；地址：{{@key[3]}}；</p>

    </div>

    {{/each}}

</script>  

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript">

$(function () {

  // 抓取模板数据

  var theTemplateScript = $("#address-template").html();

  Handlebars.registerHelper('formatnumber', function(num, options){

      num = num + 2;

      return num;

 });

  // 编译模板

  var theTemplate = Handlebars.compile(theTemplateScript);

  // 定义数据

  var data={

        page:[["张三","男","123","广<br/>州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]

    }

  // 把数据传送到模板

  var theCompiledHtml = theTemplate(data);

  // 更新到模板

  $('#content-area').html(theCompiledHtml);

});

</script>

Helper的位置必须在编译模板之前，否则是无效的！！

使用Helper之后，现在又报其他的错误

居然连数组的写法都不支持，但是获取属性的写法却可以，比如@key["name"]。不得不吐槽这个模板引擎用起来真不方便。

但是最后还是找到解决的思路

<script id="address-template" type="text/x-handlebars-template">

    <div class="sec_1">

        <p>首页</p>

    </div>

    {{#each page}}

    <div class="sec_{{formatnumber @index}}">

        <p>{{#with @key}}{{0}}{{/with}}</p>

        <p>性别：{{#with @key}}{{1}}{{/with}}；联系方式：{{#with @key}}{{2}}{{/with}}；地址：{{#with @key}}{{{3}}}{{/with}}；</p>

    </div>

    {{/each}}

</script>

很遗憾，用@key虽然没有出错了，但是却渲染不出来。

其实已经离成功很接近了，把@key改成this就可以了

<script id="address-template" type="text/x-handlebars-template">

    <div class="sec_1">

        <p>首页</p>

    </div>

    {{#each page}}

    <div class="sec_{{formatnumber @index}}">

        <p>{{#with this}}{{0}}{{/with}}</p>

        <p>性别：{{#with this}}{{1}}{{/with}}；联系方式：{{#with this}}{{2}}{{/with}}；地址：{{#with this}}{{{3}}}{{/with}}；</p>

    </div>

    {{/each}}

</script>