都说很简单的Hogan，还是得看案例才能懂啊

基础使用我就不多说了，这里有个帖子讲的很详细： Hogan的安装和使用

直接上案例：

首先引入hogan，并设置渲染html的模板

'use strict';
var Hogan = require('hogan.js');

var conf = {
    severHost : '',
};

var _mm = {

    //渲染HTML模版
    renderHtml : function(htmlTemplate,data){
        //对模版进行编译
        var template = Hogan.compile(htmlTemplate),
            // 编译后的模版，根据后台传回的数据进行渲染
            result = template.render(data);
        //返回渲染后的结果
        return result;
    }
};

module.exports = _mm; 

写好模板：

{{#notEmpty}}
<div class="cart-header">
    <table class="cart-table">
        <tr>
            <th class="cart-cell">
                <label for="" class="cart-label">
                    {{#allChecked}}
                    <input type="checkbox" class="cart-select-all" checked>
                    {{/allChecked}}
                    {{^allChecked}}
                    <input type="checkbox" class="cart-select-all">
                    {{/allChecked}}
                    <span>全选</span>
                </label>
            </th>
            <th class="cart-cell cell-info">商品信息</th>
            <th class="cart-cell cell-price">单价</th>
            <th class="cart-cell cell-count">数量</th>
            <th class="cart-cell cell-total">合计</th>
            <th class="cart-cell cell-opera">操作</th>
        </tr>
    </table>
</div>
<div class="cart-list">
    {{#cartProductVoList}}
    <table class="cart-table" data-product-id="{{productId}}">
        <tr>
            <td class="cart-cell cell-check">
                <label class="cart-label">
                    {{#productChecked}}
                    <input type="checkbox" class="cart-select" checked>
                    {{/productChecked}}
                    {{^productChecked}}
                    <input type="checkbox" class="cart-select">
                    {{/productChecked}}
                </label>
            </td>
            <td class="cart-cell cell-img">
                <a href="./detail.html?productId={{productId}}" class="link">
                    <img class="p-img" src="{{imageHost}}{{productMainImage}}" alt="{{productName}}"></img>
                </a>
            </td>
            <td class="cart-cell cell-info">
                <a href="./detail.html?productId={{productId}}" class="link">{{productName}}</a>
            </td>
            <td class="cart-cell cell-price">{{productPrice}}</td>
            <td class="cart-cell cell-count">
                <span class="count-btn minus">-</span>
                <input class="count-input" value="{{quantity}}" data-max="{{productStock}}"/>
                <span class="count-btn plus">+</span>
            </td>
            <td class="cart-cell cell-total">¥{{productTotalPrice}}</td>
            <td class="cart-cell cell-opera">
                <span class="link cart-delete">删除</span>
            </td>
        </tr>
    </table>
    {{/cartProductVoList}}
</div>
<div class="cart-footer">
    <div class="select-con">
        <label>
            {{#allChecked}}
            <input type="checkbox" class="cart-select-all" checked>
            {{/allChecked}}
            {{^allChecked}}
            <input type="checkbox" class="cart-select-all">
            {{/allChecked}}
            <span>全选</span>
        </label>
    </div>
    <div class="delete-con">
        <span class="link">
            <i class="fa fa-trash-o"></i>
            <span>删除选中</span>
        </span>
    </div>
    <div class="submit-con">
        <span>总价：</span>
        <span class="submit-total">¥{{cartTotalPrice}}</span>
        <span class="btn btn-submit">去结算</span>
    </div>
</div>
{{/notEmpty}}
<!-- 上面表示购物车确实非空，下面表示空 -->
{{^notEmpty}}
<p class="err-tip">
    <span>您的购物车空空如也，</span>
    <a href="./index.html">立即去购物</a>
</p>
{{/notEmpty}}

//引入模板：
var templateIndex   = require('./index.string');
bindEvent : function(){
        var _this = this;
        //商品的选择 / 取消选择
        $(document).on('click', '.cart-select', function(){
            var $this = $(this),
                productId = $this.parent('.cart-table').data('product-id');
            // 选中
            if ($this.is(':checked')) {
                _cart.selectAllProduct(function(res){
                    _this.renderCart(res);
                }, function(errMsg){
                    _this.showCartError();
                })
            }
        });
    },
    // 渲染购物车
    renderCart : function(data){
        // 告诉string模板应该循环几次
        this.filter(data);
        // 缓存购物车信息
        this.data.cartInfo = data;
        // 把后端的数据交给模板,生成html
        var cartHtml = _mm.renderHtml(templateIndex, data);
        $('.page-wrap').html(cartHtml);  
    },
    // 数据匹配
    filter : function(data){
        // 这里是把后端传回来的数据条数传给string模板，告诉string应该循环几次
        data.notEmpty = data.cartProductVoList.length;
    }
}