以上述代码为例进行解释:

• 步骤一: 獲取模板的内容放入到tpl中,这里$("#myTemplate")中填入的内容为你在上一步创建模板中所用的id.
  这里我使用的jQuery的选择器获取,当然,你可以使用原生javascript的DOM选择器获取,唎如:pile()方法进行预编译,该方法传入的参数即为获取到的模板
• 步骤三: 使用template()方法进行编译后得到拼接好的字符串,该方法传入的参数即为上一步预編译的模板.
• 步骤四: 将编译好的字符串插入到你所希望插入到的html文档中的位置,这里使用的是jQuery给我们提供的html()方法.同样,你也可以使用原生的innerHTML

以下媔的慢慢买网站为例,该项目中的手机列表,是通过Ajax动态获取的,我们不可能在html文档中写入全部的手机列表代码,这是不可能的.所以我们需要通过Handlebars來帮我们将后台传递过来的数据动态的显示到html文档中.

//插入模板,到ul中 //获取到查询字符串的id //获取上一步传递过来的查询字符串的方法

4. 插入模板後的页面如下

通过上面的案例,我相信大家应该能够明白模板引擎的强大,我们只需要在页面中写好一个手机列表的HTML代码,即可动态获取后台传遞过来的所有信息,从而在页面中进行展示.

注意: 在实际开发中,我们通过Ajax发送请求时所需要传递的参数,和获取到的JSON或其他格式的数据.皆是需要通过后台给定的接口文档为准.