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多次渲染和多个赋值的更多相关文章

  1. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  2. Mustache.js使用笔记(内容属于转载总结)

    1.Mustache的语法很简单,用两个大括号标记要绑定的字段即可,“{{}}” Mustache主要的渲染方法为Mustache.render(),该方法有两个参数,第一个为要渲染的模版, 也就是例 ...

  3. Js模板引擎mustache

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  4. 模板引擎mustache.js

    Javascript模板引擎mustache.js详解   阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...

  5. SDL2来源分析3:渲染(SDL_Renderer)

    ===================================================== SDL源代码分析系列文章上市: SDL2源码分析1:初始化(SDL_Init()) SDL2 ...

  6. SDL2源代码分析3:渲染器(SDL_Renderer)

    ===================================================== SDL源代码分析系列文章列表: SDL2源代码分析1:初始化(SDL_Init()) SDL ...

  7. vue动态添加对象属性,视图不渲染

    发现数据确实改变了.但是视图没有渲染.原因是赋值的问题,应该这样动态增加属性 vm.$set(vm.template.titleAttachInfoDetail,newKey,newVal) vm 当 ...

  8. vue 相邻自定义组件渲染错误正确的打开方式

    话不多说看问题: 当封装自定义组件时例如(自定义下拉列表)两个相同的组件在多次v-if变化时偶尔会发生渲染错误,明明赋值正确但是组建中的ajax方法可能返回的数据乱掉,或者其他神逻辑错误. 经过查询发 ...

  9. js模板引擎mustache介绍及实例

    在Javascript中 mustache.js是实现mustache模板系统. Mustache是一种没有逻辑的模板语法.它可以应用于HTML.配置文件.源代码等任何地方. 它通过使用散列或对象中提 ...

随机推荐

  1. jenkins之另辟蹊径实现根据svn项目实现智能选择

    项目要求,根据svn选择的trunk或branches及tags里的各分支,动态选择参数.一开始认为很简单,直接用jenkins中的List Subversion tags插件及active choi ...

  2. jmeter中Implementation中几个选项的区别

    在jmeter发送http请求时,Implementation下拉框中有几个选项,如下: 那到底有什么区别呢?发送http请求改用哪种方法呢.百度后查之,没答案.我们还是看官方文档吧.官方文档解释如下 ...

  3. MAC SVN 基本设置 终端命令

    extends:http://www.cnblogs.com/heiniuhaha/archive/2012/07/31/2616493.html 安装XCode后Mac OS X 系统已经内置了sv ...

  4. mysql补充(4)数据完整性

    数据完整性(Data Integrity)是指数据的精确性(Accuracy) 和可靠性(Reliability).(补充mysql数据完整性和约束) 它是应防止数据库中存在不符合语义规定的数据和防止 ...

  5. oracle如何设置表空间autoextensible自动扩容

    SELECT a.tablespace_name "表空间名", total / 1024 / 1024 "表空间大小单位M", free / 1024 / 1 ...

  6. Xcode - xcode-select: error: tool 'xcodebuild' requires Xcode报错解决方案

    用mac 自带的终端执行的命令,安装安装Vapor和toolbox 安装指令: macdeMacBook-Pro:~ mac$ curl -sL check.vapor.sh| bash 结果报这个错 ...

  7. OpenCV学习笔记之课后习题练习3-3

    3.3 创建一个100*100的拥有三个通道的二维字节类型矩阵,将其元素全部置0.通过cvPtr2D函数将指针指向中间通道(绿色),以(20,5)和(40,20)为顶点间画一个绿色的长方形. cvPt ...

  8. Scala学习笔记(3)-表达式归纳

    语法:使用表达式定义值和变量 val <identifier>[:<type>]=<expression>  字面值类型 var <identifier> ...

  9. Ubuntu 14.04 使用速度极快的Genymotion 取代蜗牛速度的原生AVD模拟器

    Ubuntu 14.04 使用速度极快的Genymotion 取代蜗牛速度的原生AVD模拟器 2014-5-29阅读4045 评论0         默认的AVD的速度可谓奇慢无比,一番搜索最后找到了 ...

  10. router-link params传参

    1.router.js配置 需要在路径后定义上要传的属性名 -->       /:属性名(query方式不需要) { path: '/CreateProgress/:name1', name: ...