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.配置文件.源代码等任何地方. 它通过使用散列或对象中提 ...
随机推荐
- [sharepoint]Office Web Apps for SharePoint 2010
Office Web Apps for SharePoint 2010 2012年09月20日 ⁄ 综合 ⁄ 共 908字 ⁄ 字号 小 中 大 ⁄ 评论关闭 After you install Of ...
- @staticmethod和@classmethod的作用与区别
一般来说,要使用某个类的方法,需要先实例化一个对象再调用方法. 而使用@staticmethod或@classmethod,就可以不需要实例化,直接类名.方法名()来调用. 这有利于组织代码,把某些应 ...
- php里面向指定的页面提交数据
在jquery里用 load post 等等,无法得到我想要的结果!于是突然-----这几天想的东西都白想了,现在只好这样了 现在想在php里面向指定的页面提交数据,应该有,还可以有返回值 于是找了这 ...
- nowcoder2018年全国多校算法寒假训练营练习比赛(第一场)
[气死我了 写完了博客发布 点看来一看怎么只剩下一半不到的内容了!!!!!!!!!!] [就把卡的那两道放上来好了 其余的不弄了 生气!!!!!] 可以说是很久没有打比赛了 今天这一场主要是 基础算 ...
- CSU 1809 - Parenthesis - [前缀和+维护区间最小值][线段树/RMQ]
题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1809 Bobo has a balanced parenthesis sequenc ...
- easyui-datagrid个人实例
这个实例数据表格的功能,可以实现分页,增删改查功能 1.user.jsp <%@ page language="java" contentType="text/ht ...
- proxychains
有时候需要连接某机器,但是直接连被屏蔽了,虽然可以用代理来搞定一些应用程序,但是很多程序不支持代理,或者只支持某些类型的代理,这时候就可以试一试 proxychains 这个软件了. 最近用各种脚本下 ...
- 【PyQt5-Qt Designer】QComboBox(下拉列表框) 使用模板
import sys from PyQt5.QtWidgets import * from PyQt5.QtGui import * from PyQt5.QtCore import * ###### ...
- CentOS安装Jdk并配置环境变量
环境 CentOS7.2 (安装镜像CentOS-7-x86_64-DVD-1611) 目标 在CentOS7.2上安装jdk1.8(tar.gz安装包),并配置环境变量 jdk安装在/home/so ...
- sql优化 慢查询分析
查询速度慢的原因很多,常见如下几种 SQL慢查询分析 转自:https://www.cnblogs.com/firstdream/p/5899383.html 1.没有索引或者没有用到索引(这是查询慢 ...