都說很簡單的Hogan，還是得看案例才能懂啊

梭梭醬加油鴨發表於2019-03-19
HOG

基礎使用我就不多說了，這裡有個帖子講的很詳細： 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;
    }
}
複製程式碼

相關文章