内容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. The Little Prince-12/06

    The Little Prince-12/06 “That doesn't matter. Draw me a sheep.” When the prince ask the planet to dr ...

  2. SQL Server char,varchar,nchar,nvarchar区别

    SQL Server char,varchar,nchar,nvarchar区别 (1)       定义: char:    固定长度,存储ANSI字符,不足的补英文半角空格. nchar:   固 ...

  3. Linux 安装本地 yum源

    放入Centos6.4的镜像光盘或找到镜像文件 [root]#mount /dev/cdrom  /media/cdrom  #挂载本地镜像 [root]#rm -rf /etc/yum.repo.d ...

  4. cannot_delete_plugins_expand_dir "/var/lib/rabbitmq/mnesia/rabbit@iZbp1iiexwyqe7tpjigcg9Z-plugins-expand"

    [root@iZbp1iiexwyqe7tpjigcg9Z rabbitmq]# cat startup_err /usr/lib/rabbitmq/bin/rabbitmq-env: line 91 ...

  5. 观实验室PPT演讲有感

    outline 一定要有 说话的语速要慢,压制住紧张的心情 提前一天发布PPT dont` argue with audience, especially professor and teachers ...

  6. intel FPGA使用

    https://www.altera.com/documentation/swn1503506366945.html https://files.cnblogs.com/files/shaohef/o ...

  7. MFC限制edit控件的字符输入长度

    一. 1.Edit 控件添加EN_CHANGE事件 #define MAX_SIZE 200 void CMyDlg::OnChangeEditFeed() { // TODO: 如果该控件是 RIC ...

  8. Junit中的setUp()与setUpBefore(), tearDown()与tearDownAfterClass()解析

    @BeforeClass public static void setUpBeforeClass() throws Exception { } @AfterClass public static vo ...

  9. maven 新建项目时报错“Could not calculate build plan: Failure to transfer org.apache.maven.plugins:。。。。。。。。。。。。。。”

    首先,我们看到观察这个错误:Failure to transfer org.apache.maven.plugins,这种错误是项目部署时,maven所关联的仓库中插件的设置出错了. 所以我们需要找到 ...

  10. easyui-datagrid合并相同行功能扩展

    //合并相同行$.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(func ...