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我們可以很簡單的對數據進行替換,在前端中應用比較廣泛。