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咱們能夠很簡單的對數據進行替換，在前端中應用比較普遍。