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.配置文件.源代码等任何地方. 它通过使用散列或对象中提 ...
随机推荐
- python nose测试框架全面介绍九---各种html报告插件对比
一直在使用Nose-html-reporting,并输出html报告,但今天在使用时发出有点问题:于时,将python目前可能的html报告插件下载后进行对比,如下 一.Nose-html-repor ...
- Office2010安装需要MSXML版本6.10.1129.0的方法
今天给朋友装Office2010,由于朋友之前使用的是绿化版的0ffice2007,所以卸载后安装Office遇到了若要安装Office2010,需要在计算机上安装MSXML版本6.10.1129.0 ...
- 仿QQ、微信翻页查看聊天记录
主界面MainActivity.class public class MainActivity extends Activity implements OnScrollListener{ privat ...
- 【Android】 导入项目报错的解决方案
1.打项目的properties -->android 为其指一个运版本, 2.修改default properties 文件 ,改相应版本等级 3.选中项目,单击右键,选中properties ...
- 【转】JavaScript 事件顺序:冒泡和捕获
补充说明:这篇文章通俗易懂地讲解了冒泡和捕获原理,原文来自 ppk 大侠的 quirksmode 站点.感谢网友 hh54188 的翻译. 事件的发生顺序 这个问题的起源非常简单,假设你在一个元素中又 ...
- [EF]vs15+ef6+mysql code first方式
写在前面 前面有篇文章,尝试了db first方式,但不知道是什么原因一直没有成功,到最后也没解决,今天就尝试下code first的方式. [EF]vs15+ef6+mysql这个问题,你遇到过么? ...
- Oracle之RMAN备份恢复1-基础篇
1,rman的作用与体系架构 1.1 什么是rman rman(recovery manager)是oracle8i以后dba的一重要工具一般位于$oracle_home/bin目录下,主要用来备份, ...
- 【紫书】 The Falling Leaves UVA - 699 递归得简单
题意:给你一颗二叉树的前序遍历,空子树以-1表示,将左右子树的权值投影到一维数轴上,左儿子位置为根位置-1,右儿子+1求个个整点上的和: 题解:递归,整个过程只需维护一个sum数组. 更新根,更新le ...
- 解决windows系统的oracle数据库不能启动ora-00119和ora-00130的问题
SQL>startup 报错ora-00119 ora-00130 出现上述错误应该是数据库的监听文件出了问题,修改listener.ora文件: # listener.ora Network ...
- Oracle管理监控之sqlplus实现上下翻页设置
环境: 操作系统:red hat 5.8 OS 数据库:oracle 11g 11.2.0.1 安装软件:IO-Tty-1.07.tar. Term-ReadLine-Gnu-1.16.tar.uni ...