chenlin1 / handlebarsjs

js：模板引擎

handlebarsjs

1.前后端分离原理图

2.字符串拼接

`

` `<script> //数据 var data={ name:'小林', birth:'1991.02.07', home:'**', job:'前端' }; var str = ""; str += "

姓名："+data.name+"

"; str += "

出生日期："+data.birth+"

"; str += "

出生地："+data.home+"

"; str += "

职业："+data.job+"

"; $(".card").html(str); </script>` ## 3. handlebarsjs ## 1.一条渲染 <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script> <script id="card-template" type="text/x-handlebars-template">

姓名：{{name}}

出生日期：{{birth}}

出生地：{{home}}

职业：{{job}}

</script>

<script> //数据 var data={ name:'小林', birth:'1991.02.07', home:'**', job:'前端' }; var t = $("#card-template").html(); // console.log(t); var f = Handlebars.compile(t); // console.log(f);s var h = f(data); $(".card").html(h); </script> 2.二条渲染 <script id="card-template" type="text/x-handlebars-template"> {{#each this}}

姓名：{{name}}

出生日期：{{birth}}

出生地：{{home}}

职业：{{job}}

{{/each}} </script>

<script> //数据 var data=[ { name:'小林', birth:'1991.02.07', home:'**', job:'前端' }, { name:'小飞', birth:'1992.02.07', home:'**', job:'前端' } ] var t = $("#card-template").html(); // console.log(t); var f = Handlebars.compile(t); // console.log(f);s var h = f(data); $(".card").html(h); </script> ## 4. handlebarsjs特点 ## 1.避免在js中写"html代码" 2.可读性好 3.易维护 ## 5. handlebarsjs特点 ##