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.配置文件.源代码等任何地方. 它通过使用散列或对象中提 ...
随机推荐
- nginx动静分离小示例
server { listen ; server_name www.xxx.cn; #静态页面 #匹配首页,url:www.xxx.cn index index.html; root /usr/loc ...
- vue之用法
一.安装 对于新手来说,强烈建议大家使用<script>引入 二. 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. 三.使用V ...
- CodeFirst Update-Database 出现对象'DF__**__**__**' 依赖于 列'**'。
今天在使用Mirgration更新数据表时,出现这样一个错误 经排查,是由于CodeFirst在创建数据库时会为不可为null的字段创建默认值约束 只要在数据库中删除这个约束就可以解决
- html 在一个超链接上面,鼠标移动上去时,也显示一串文字,如何实现
a标签的title属性,对title属性赋值即可.例如:<a href="http://www.baidu.com/" title="跳转到百度"> ...
- Ubuntu 14.04 配置 LAMP+phpMyAdmin PHP开发环境!
先安装 Apache Web服务器,终端:sudo apt-get install apache2 apache2-doc,然后测试是否安装成功.浏览器地址栏输入:http://l ...
- remove unusable kernel in linux.
dpkg --get-selections | grep linux-image 1933 sudo apt-get remove linux-image-extra-4.4.0-57-generi ...
- Alisha’s Party---hdu5437(模拟+优先队列)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5437 题意:公主有k个朋友来参加她的生日party,每个人都会带价值为v[i]的礼物过来,在所有人到齐 ...
- Python开发【笔记】:获取mp3文件获取信息
import eyed3 def main(): mp3 = '8200031001_13429822982_1_00163e086216990b11e82403f00d3d9a.mp3' xx = ...
- Linux替换字符串
sed命令批量替换多个文件中的字符串: 命令:sed -i “s/原字符串/新字符串/g” `grep 原字符串 -rl 所在目录` 例如:我要把 xy 替换为 mn,执行命令: sed -i “s/ ...
- 跨平台的移动应用开发框架-Sencha Touch
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/tommychen1228/article/details/32959529 近期决定转以日常技术类文 ...