mustache多次渲染和多个赋值
mustache多次渲染和多个赋值,
html页面的script标签中的代码,设置多个键:
<!-- 项目列表 -->
<script type="text/x-template" id="itemlist-tmpl">
{{#itemlist}}
<li class="clearfix">
<span class="l radio"><input type="radio" name="itemradio" data-itemguid="{{itemguid}}" data-itemname="{{itemname}}" data-departname="{{departname}}" data-itemcode="{{itemcode}}" data-itemtype="{{itemtype}}"
data-person_certno="{{person_certno}}" data-contact="{{contact}}" data-contact_tel="{{contact_tel}}" data-contact_email="{{contact_email}}" data-constructionproperty="{{constructionproperty}}" data-isTechTransferProject="{{isTechTransferProject}}"
data-belongtindustry="{{belongtindustry}}" data-itemstartdate="{{itemstartdate}}" data-itemfinishdate="{{itemfinishdate}}" data-totalinvest="{{totalinvest}}" data-itemcapital="{{itemcapital}}"
data-fundsources="{{fundsources}}" data-financialresources="{{financialresources}}" data-constructionsite="{{constructionsite}}" data-constructionsitedesc="{{constructionsitedesc}}"
data-constructionscaleanddesc="{{constructionscaleanddesc}}" data-landarea="{{landarea}}" data-newlandarea="{{newlandarea}}" data-agriculturallandarea="{{agriculturallandarea}}"
data-legalproperty="{{legalproperty}}" data-itemlegalcerttype="{{itemlegalcerttype}}" data-itemlegalcertnum="{{itemlegalcertnum}}" /></span>
<span class="l radio-name">{{itemname}}</span>
</li>
{{/itemlist}}
</script>
其中绿色字体为 itemlist 循环多次渲染当中的多个键值;
js脚本中代码负责和后台交互,访问接口获取数据和给模板的键值赋值:
// 点击选择项目
$(".get").on("click", function() {
requestCompanyList();
}) var requestCompanyList = function() {
Util.ajax({
url : myController.getMyCompanyList,
data : {},
async : false,
success : function(cpmpanydata) {
$.each(cpmpanydata.companylist, function(key, value) {
value.key = key;
});
var html = M.render(getTmpl, {
companylist : cpmpanydata.companylist
});
var companyinfo;
layer.open({
type : 1,
skin : 'layui-layer-approve', // 样式类名
closeBtn : 1, // 不显示关闭按钮
anim : 2,
title : '',
shadeClose : false, // 开启遮罩关闭
area : [ '750px', '580px' ],
content : html,
success : function() {
$("#companycount").text(cpmpanydata.companylist.length);
$(".company").niceScroll({
cursorcolor : "#daebfb"
});
$(".radios").niceScroll({
cursorcolor : "#daebfb"
});
$(".radiocompany").on("click", function() {
$(".radiocompany").removeClass("active");
var $this = $(this);
$this.addClass("active");
requestCompanyItem($this.data('creditcode'));
})
$(".serch-btn").on("click", function() {
keyWord = $("#searchbar").val().trim();
requestCompanyItem($(".radiocompany.active").attr("data-creditcode"));
})
$(".save").on("click", function() {
// 获取接口返回的值赋值给键值的值
var itemname = $('input[name="itemradio"]:checked').attr("data-itemname");
var departname = $('input[name="itemradio"]:checked').attr("data-departname");
var itemguid = $('input[name="itemradio"]:checked').attr("data-itemguid");
var itemcode = $('input[name="itemradio"]:checked').attr("data-itemcode");
// 项目单位统一社会信用代码
var person_certno = $('input[name="itemradio"]:checked').attr("data-person_certno");
// 联系人、联系人电话、联系邮箱
var contact = $('input[name="itemradio"]:checked').attr("data-contact");
var contact_tel = $('input[name="itemradio"]:checked').attr("data-contact_tel");
var contact_email = $('input[name="itemradio"]:checked').attr("data-contact_email");
// 项目类型
var itemtype = $('input[name="itemradio"]:checked').attr("data-itemtype");
if(itemtype == "A00001"){
chooseBusinessByItemtype("审批");
}else if(itemtype == "A00002"){
chooseBusinessByItemtype("核准");
}else{
chooseBusinessByItemtype("备案");
} // 项目法人类型
var legalproperty = $('input[name="itemradio"]:checked').attr("data-legalproperty");
// 项目法人证照类型
var itemlegalcerttype = $('input[name="itemradio"]:checked').attr("data-itemlegalcerttype");
// 项目法人证照编号
var itemlegalcertnum = $('input[name="itemradio"]:checked').attr("data-itemlegalcertnum"); // 建设性质
var constructionproperty = $('input[name="itemradio"]:checked').attr("data-constructionproperty");
// 是否技改项目
var isTechTransferProject = $('input[name="itemradio"]:checked').attr("data-isTechTransferProject");
// 所属行业
var belongtindustry = $('input[name="itemradio"]:checked').attr("data-belongtindustry"); // 拟开工时间
var itemstartdate = $('input[name="itemradio"]:checked').attr("data-itemstartdate");
// 拟建成时间
var itemfinishdate = $('input[name="itemradio"]:checked').attr("data-itemfinishdate");
// 总投资
var totalinvest = $('input[name="itemradio"]:checked').attr("data-totalinvest");
// 项目资本金
var itemcapital = $('input[name="itemradio"]:checked').attr("data-itemcapital");
// 资金来源
var fundsources = $('input[name="itemradio"]:checked').attr("data-fundsources");
// 财政资金来源
var financialresources = $('input[name="itemradio"]:checked').attr("data-financialresources");
// 建设地点
var constructionsite = $('input[name="itemradio"]:checked').attr("data-constructionsite");
// 建设地点详情
var constructionsitedesc = $('input[name="itemradio"]:checked').attr("data-constructionsitedesc");
// 建设规模及内容
var constructionscaleanddesc = $('input[name="itemradio"]:checked').attr("data-constructionscaleanddesc");
// 用地面积
var landarea = $('input[name="itemradio"]:checked').attr("data-landarea");
// 新增用地面积
var newlandarea = $('input[name="itemradio"]:checked').attr("data-newlandarea");
// 农用地面积
var agriculturallandarea = $('input[name="itemradio"]:checked').attr("data-agriculturallandarea"); // 给页面根据id属性找到对应标签赋值
$("#itemname").val(itemname);
$("#companyname").val(departname);
$("#itemguid").val(itemguid);
$("#itemcode").val(itemcode);
$("#itemlegalcreditcode").val(person_certno);
$("#contractperson").val(contact);
$("#contractphone").val(contact_tel);
$("#contractemail").val(contact_email);
$("#itemtype").val(itemtype);
$("#constructionproperty").val(constructionproperty);
$("#belongtindustry").val(belongtindustry); $("#legalproperty").val(legalproperty);
$("#itemlegalcerttype").val(itemlegalcerttype);
$("#itemlegalcertnum").val(itemlegalcertnum); $("#itemstartdate").val(itemstartdate);
$("#itemfinishdate").val(itemfinishdate);
$("#totalinvest").val(totalinvest);
$("#itemcapital").val(itemcapital);
$("#fundsources").val(fundsources);
$("#financialresources").val(financialresources);
$("#constructionsite").val(constructionsite);
$("#constructionsitedesc").val(constructionsitedesc);
$("#constructionscaleanddesc").val(constructionscaleanddesc);
$("#landarea").val(landarea);
$("#newlandarea").val(newlandarea);
$("#agriculturallandarea").val(agriculturallandarea);
// $('input[name="isTechTransferProject"][value='+isTechTransferProject+']').attr("checked",true);
$("input[name=isTechTransferProject][value="+isTechTransferProject+"]").attr("checked",true); $("#companyid").val($(".radiocompany.active").attr("data-companyid"));
layer.closeAll();
})
$(".cancel").on("click", function() {
layer.closeAll();
})
}
});
if (cpmpanydata.code == "1") {
if (cpmpanydata.companylist.length > 0) {
companyinfo = cpmpanydata.companylist[0];
}
requestCompanyItem(companyinfo.creditcode, cpmpanydata.companylist);
}
}
});
}
实际场景是选择单选按钮组确定给页面标签自动填充值:

mustache多次渲染和多个赋值的更多相关文章
- Javascript模板引擎mustache.js详解
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
- Mustache.js使用笔记(内容属于转载总结)
1.Mustache的语法很简单,用两个大括号标记要绑定的字段即可,“{{}}” Mustache主要的渲染方法为Mustache.render(),该方法有两个参数,第一个为要渲染的模版, 也就是例 ...
- Js模板引擎mustache
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
- 模板引擎mustache.js
Javascript模板引擎mustache.js详解 阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...
- SDL2来源分析3:渲染(SDL_Renderer)
===================================================== SDL源代码分析系列文章上市: SDL2源码分析1:初始化(SDL_Init()) SDL2 ...
- SDL2源代码分析3:渲染器(SDL_Renderer)
===================================================== SDL源代码分析系列文章列表: SDL2源代码分析1:初始化(SDL_Init()) SDL ...
- vue动态添加对象属性,视图不渲染
发现数据确实改变了.但是视图没有渲染.原因是赋值的问题,应该这样动态增加属性 vm.$set(vm.template.titleAttachInfoDetail,newKey,newVal) vm 当 ...
- vue 相邻自定义组件渲染错误正确的打开方式
话不多说看问题: 当封装自定义组件时例如(自定义下拉列表)两个相同的组件在多次v-if变化时偶尔会发生渲染错误,明明赋值正确但是组建中的ajax方法可能返回的数据乱掉,或者其他神逻辑错误. 经过查询发 ...
- js模板引擎mustache介绍及实例
在Javascript中 mustache.js是实现mustache模板系统. Mustache是一种没有逻辑的模板语法.它可以应用于HTML.配置文件.源代码等任何地方. 它通过使用散列或对象中提 ...
随机推荐
- spring配置多视图解析器
最近做一个小项目(移动端),自己搭了个简单的SSM框架(spring + spring MVC + Mybitis),展示层本来选用的是jsp,各方便都已经搭建好,结果发现有些页面需要用到H5的一些功 ...
- 【巷子】---vue基于mint-ui三级联动---【vue】
一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install ...
- 统计Java项目的代码行数
Java项目谈论行数多少有点无聊,但是有的时候就想看看一个开源的代码的量级,用Shell命令统计再合适不过了 去掉空行和注释: find . -name "*.java" |xar ...
- PowerDesigner 把Comment/name 互转
转载:https://www.cnblogs.com/cxd4321/archive/2009/03/07/1405475.html 在使用PowerDesigner对数据库进行概念模型和物理模型设计 ...
- Mongodb之主从复制
本次在同一台主机启动两个端口进行配置 在文件夹/etc/mongod下面新建两个配置文件 一个主配置文件一个从配置文件 master.conf dbpath=/data/mongo-master lo ...
- Docker添加镜像加速器
Docker默认pull连接镜像为国外镜像,速度较慢,注册阿里云可以生成一个镜像加速器 登录阿里云 https://cr.console.aliyun.com获取私有加速地址 修改配置文件/etc/d ...
- java后台设计简单的json数据接口,设置可跨域访问,前端ajax获取json数据
在开发的过程中,有时候我们需要设计一个数据接口.有时候呢,数据接口和Web服务器又不在一起,所以就有跨域访问的问题. 第一步:简单的设计一个数据接口. 数据接口,听起来高大上,其实呢就是一个简单的Se ...
- OpenCV学习笔记之课后习题练习3-4
练习:创建一个大小为100*100的三通道RGB图像.将它的元素全部置0.使用指针算法以(20,5)与(40,20)为顶点绘制一个绿色平面. 参考博文:blog.csdn.net/qq_2077736 ...
- SVN cleanup 报错,清除svn的工作队列
SVN 提交报错, Team->cleanup还是报错: Can't install '*' from pristine store, because no checksum is record ...
- numpy的文件存储 .npy .npz 文件
1)Numpy能够读写磁盘上的文本数据或二进制数据.将数组以二进制格式保存到磁盘np.load和np.save是读写磁盘数组数据的两个主要函数,默认情况下,数组是以未压缩的原始二进制格式保存在扩展名为 ...