handlebar的简单使用及方法

    handlebar是一款高效的模板引擎，他主要用于咱们在重复使用和替换数据信息的时候能用一套模板的方式将他表示出来，通常咱们前端须要先后端的交互，因此在这里我就介绍一下handlebar的使用方法。

    下面是handlebar的基本表达式

    <p>hello, {{user.username}}</p>

    <p>您的年龄是: {{user.age}}</p>

    其中{{和}}之间}为handlebar的变量

这里的user. Username和user.age是咱们存在数据库json格式的user下的两个变量值；

而后咱们将上面写的数据放到本身定义的<script>里面，以下：

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

        Template content

    </script>

而后在咱们定义的<script>以前写个具体id=content的<div>，以便于后面咱们将<script>里的内容引入到这个div内容里。

上述的内容是写在html内容里面的，而接下来的代码须要另外建立一个js文件来写，而后咱们在html里面引用这个js文件和handlebar的js文件。

使用handlebars.compile进行编译模板：

    var source = document.getElementById('template').innerHTML;

    var template = Handlebars.compile(source);

    content.html(template(fillData));

    这里的fillData就能够经过$.ajax来引入后台data的值，而后在{{}}里面就直接引用后台的数据，这里若是咱们是直接引入后台的数据，就直接在fillData上填data,若是是想自定义一个文件名，就写自定义文件名：data;

    经过上述的方法，咱们就能实现先后端之间的交互，数据信息能够方便的传递在网页上，但咱们在写的时候，须要注意在html里面只能定义一个<script>，若是是要循环数据组的话，就使用{{#each data}}的方法，这里的data能够是数据库里的属性，也能够是自定义的文件名；

{{{}}}是指若是你不想变量里面的字符串被转义就使用这个对变量进行处理；

 

最后，我这里只对handlebar的常见用法进行了梳理，他还有其余的不少用法；使用handlebar咱们能够很简单的对数据进行替换，在前端中应用比较普遍。