内容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();
});
});

注意语法前后空格。

很好用。

灵活巧妙运用,无限的可能。

art-template实战的更多相关文章

  1. art template前端模板引擎

    偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...

  2. art.template 循环里面分组。

    后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢? 下面就是解决方案: <h2>循环4个一组</h2> <script type="text/ht ...

  3. 利用art.template模仿VUE 一次渲染多个模版

    TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...

  4. 利用art.template模仿VUE

    首先先看一下Typescript代码: import template = require('art-template/lib/template-web'); interface TemplateBi ...

  5. js 模板引擎 -Art Template

    一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  6. 一分钟上手artTemplate

    一分钟上手artTemplate artTemplate是腾讯开源的前端模版引擎.之前做hue二次开发,只接触过用python写的mako模版引擎,所以之前对前端模版引擎了解不是很多. 这次因为pm叫 ...

  7. Express使用art-template模板引擎

    第一步:安装 npm install --save art-template npm install --save express-art-template 第二步:指定.html使用的解析引擎(官方 ...

  8. vscode开发中绝对让你惊艳的插件!!!(个人在用)

    识别模版引擎 1.Apache Velocity :识别Velocity(vm) 2.Art Template Helper:识别artTemplate 点击路径跳转 1.Laravel goto v ...

  9. ES6/ES2015的一些特性的简单使

    1.一些常用的ES6的特性: let, const, class, extends, super, arrow functions, template string, destructuring, d ...

  10. artTemplate子模板include

    art.Template:https://github.com/aui/art-template 下面来实现利用模版来实现递归调用生成tree <script type="text/h ...

随机推荐

  1. OpenGL: 实现立体显示

    https://blog.csdn.net/augusdi/article/details/19922295 立体显示原理:设没有立体显示的模型视图矩阵ModelView为Mv,投影矩阵为Mp,则.物 ...

  2. linux+nginx+mysql+php环境下,安装ecshop

    我们在工作过程中要经常和电商打交道,所以,学会安装ecshop是必须的. 下面我们来介绍一下ecshop的安装. nginx和php安装整合,在我前面的文章中有提到,这里就不做赘述了.mysql可以使 ...

  3. python基础:re模块匹配时贪婪和非贪婪模式

    python贪婪和非贪婪 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词默认是贪婪的(在少数语言里也可能是默认非贪婪),总是尝试匹配尽可能多的字符:非贪婪则相反,总是尝试匹配尽可能少 ...

  4. 基于SSL的MySQL主从

    master 端 配置CA和证书 [root@baseos-1_192.168.31.140 ~]# cd /etc/pki/CA/ #生成根证书的私钥 [root@baseos-1_192.168. ...

  5. Linux学习笔记之yum安装和卸载软件

    # yum -y install 包名(支持*) :自动选择y,全自动 # yum install 包名(支持*) :手动选择y or n # yum remove 包名(不支持*) # rpm -i ...

  6. P3157 [CQOI2011]动态逆序对(树状数组套线段树)

    P3157 [CQOI2011]动态逆序对 树状数组套线段树 静态逆序对咋做?树状数组(别管归并QWQ) 然鹅动态的咋做? 我们考虑每次删除一个元素. 减去的就是与这个元素有关的逆序对数,介个可以预处 ...

  7. c++ kafka 客户端rdkafka报Receive failed: Disconnected问题原因以及解决方法

    %3|1538976114.812|FAIL|rdkafka#producer-1| [thrd:kafka-server:9092/bootstrap]: kafka-server:9092/0: ...

  8. plsql developer 10注册码----亲测截止2017年5月6可用

    亲测截止2017年5月6可用 Product Code:4t46t6vydkvsxekkvf3fjnpzy5wbuhphqzserial Number:601769password:xs374ca

  9. topcoder srm 350 div1

    problem1 link 满足$a^{b}\leq5000000,b>1$的数字不多,有2000多个,直接暴力计算能组成哪些数字即可. import java.util.*; import j ...

  10. img的基线对齐问题

    http://blog.csdn.net/u011997156/article/details/44806523