art-template实战
内容div
<div id="sku-cont">
<div class="form-group col-lg-12">
<div class="col-lg-2">
</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">
</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">
</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实战的更多相关文章
- art template前端模板引擎
偶然看到后台有一段代码 采用的是art template的模板引擎 地址为 http://aui.github.io/artTemplate/ 这段代码很简洁 var html = template( ...
- art.template 循环里面分组。
后台提供给我们一个数组,我们要用模版实现上面的格式输出怎么版呢? 下面就是解决方案: <h2>循环4个一组</h2> <script type="text/ht ...
- 利用art.template模仿VUE 一次渲染多个模版
TypeScript代码 import template = require('art-template/lib/template-web'); interface TemplateBindConfi ...
- 利用art.template模仿VUE
首先先看一下Typescript代码: import template = require('art-template/lib/template-web'); interface TemplateBi ...
- js 模板引擎 -Art Template
一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- 一分钟上手artTemplate
一分钟上手artTemplate artTemplate是腾讯开源的前端模版引擎.之前做hue二次开发,只接触过用python写的mako模版引擎,所以之前对前端模版引擎了解不是很多. 这次因为pm叫 ...
- Express使用art-template模板引擎
第一步:安装 npm install --save art-template npm install --save express-art-template 第二步:指定.html使用的解析引擎(官方 ...
- vscode开发中绝对让你惊艳的插件!!!(个人在用)
识别模版引擎 1.Apache Velocity :识别Velocity(vm) 2.Art Template Helper:识别artTemplate 点击路径跳转 1.Laravel goto v ...
- ES6/ES2015的一些特性的简单使
1.一些常用的ES6的特性: let, const, class, extends, super, arrow functions, template string, destructuring, d ...
- artTemplate子模板include
art.Template:https://github.com/aui/art-template 下面来实现利用模版来实现递归调用生成tree <script type="text/h ...
随机推荐
- 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 ...
- SQL Server char,varchar,nchar,nvarchar区别
SQL Server char,varchar,nchar,nvarchar区别 (1) 定义: char: 固定长度,存储ANSI字符,不足的补英文半角空格. nchar: 固 ...
- Linux 安装本地 yum源
放入Centos6.4的镜像光盘或找到镜像文件 [root]#mount /dev/cdrom /media/cdrom #挂载本地镜像 [root]#rm -rf /etc/yum.repo.d ...
- 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 ...
- 观实验室PPT演讲有感
outline 一定要有 说话的语速要慢,压制住紧张的心情 提前一天发布PPT dont` argue with audience, especially professor and teachers ...
- intel FPGA使用
https://www.altera.com/documentation/swn1503506366945.html https://files.cnblogs.com/files/shaohef/o ...
- MFC限制edit控件的字符输入长度
一. 1.Edit 控件添加EN_CHANGE事件 #define MAX_SIZE 200 void CMyDlg::OnChangeEditFeed() { // TODO: 如果该控件是 RIC ...
- Junit中的setUp()与setUpBefore(), tearDown()与tearDownAfterClass()解析
@BeforeClass public static void setUpBeforeClass() throws Exception { } @AfterClass public static vo ...
- maven 新建项目时报错“Could not calculate build plan: Failure to transfer org.apache.maven.plugins:。。。。。。。。。。。。。。”
首先,我们看到观察这个错误:Failure to transfer org.apache.maven.plugins,这种错误是项目部署时,maven所关联的仓库中插件的设置出错了. 所以我们需要找到 ...
- easyui-datagrid合并相同行功能扩展
//合并相同行$.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(func ...