art-template实战

内容div

<div id="sku-cont">
    <div class="form-group col-lg-12">
        <div class="col-lg-2">
            &nbsp;
        </div>
        <input type="hidden" name="sku_id[]"/>
        <div class="col-lg-4">
            <label class="control-label  col-lg-3  text-right"><span class="control-label required-mark">*</span>规格:</label>
            <input class="form-control-erbi col-lg-8 required sku" type="text" name="name[]" placeholder="如：土豪金,128G"/>
        </div>
        <div class="col-lg-4">
            <label class="control-label  col-lg-3  text-right"><span class="control-label required-mark">*</span>价格:</label>
            <input class="form-control-erbi col-lg-6 required price" type="text" name="price[]" placeholder=""/>
        </div>
    </div>
</div>

模板

<!-- 模板 -->
<script id="sku-tpl" type="text/html">
    {{ if data.is_new }}
        <div class="form-group col-lg-12">
            <div class="col-lg-2">
                &nbsp;
            </div>
            <input type="hidden" name="sku_id[]"/>
            <div class="col-lg-4">
                <label class="control-label  col-lg-3  text-right"><span class="control-label required-mark">*</span>规格:</label>
                <input class="form-control-erbi col-lg-8 required sku" type="text" name="name[]" placeholder="如：土豪金,128G"/>
            </div>
            <div class="col-lg-4">
                <label class="control-label  col-lg-3  text-right"><span class="control-label required-mark">*</span>价格:</label>
                <input class="form-control-erbi col-lg-6 required price" type="text" name="price[]" />
            </div>

            <label class="control-label col-lg-1 del-btn">
                <button type="button" class="btn btn-xs btn-danger del-sku" >删除</button>
            </label>
        </div>
    {{ else }}
        {{ each data.list }}
            <div class="form-group col-lg-12">
                <div class="col-lg-2">
                    &nbsp;
                </div>
                <input type="hidden" name="sku_id[]" value="{{ $value.id }}"/>
                <div class="col-lg-4">
                    <label class="control-label  col-lg-3  text-right"><span class="control-label required-mark">*</span>规格:</label>
                    <input class="form-control-erbi col-lg-8 required sku" type="text" name="name[]" placeholder="如：土豪金,128G" value="{{ $value.name }}"/>
                </div>
                <div class="col-lg-4">
                    <label class="control-label  col-lg-3  text-right"><span class="control-label required-mark">*</span>价格:</label>
                    <input class="form-control-erbi col-lg-6 required price" type="text" name="price[]" value="{{ $value.price }}"/>
                </div>
                {{ if $value.is_default == 0 }}
                    <label class="control-label col-lg-1 del-btn">
                        <button type="button" class="btn btn-xs btn-danger del-sku" >删除</button>
                    </label>
                {{ /if }}
            </div>
        {{ /each }}
    {{ /if }}
</script>

模板赋值

// 初始化
var in_data = '<?php echo json_encode($product_sku_list);?>';
in_data = JSON.parse(in_data);
if (in_data) {
    let html = template('sku-tpl', {data:{is_new:false,list:in_data}});
    $('#sku-cont').html(html);

    // 添加移除事件
    $(".del-sku").on("click",function() {
        $(this).parent().parent().remove();
    });
}

$("#make_sku_price").on("click",function() {
    let html = template('sku-tpl', {data:{is_new:true}});
    $('#sku-cont').append(html);

    // 添加移除事件
    $(".del-sku").on("click",function() {
        $(this).parent().parent().remove();
    });
});

注意语法前后空格。
很好用。
灵活巧妙运用，无限的可能。