下面的例子是使用Handlebars生成简单的input,select ,代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>利用Handlebars动态生成input</title> <style> * { margin: 0px; padding: 0px; margin: 0 auto; } #contentDiv { width: 800px; margin: 0 auto; border-bottom: 2px solid #e6e6e6; padding:0 0 10px 0; } #titleDiv { padding: 30px 0 5px 5px; font: 500 18px "微软雅黑"; } #inputDiv { border-top: 2px solid #e6e6e6; vertical-align: middle; padding: 5px 0 0 7px; } #inputDiv input { width: 120px; } #inputDiv span { font-size: 14px; } .fixClass { width: 120px; height: 22px; line-height: 20px; } #submitDiv { padding: 20px 0 15px 0; text-align: center; } .spanClass { color: #fff; background: #89D900; height: 25px; width: 100px; display: inline-block; line-height: 25px; font-weight: bold; text-align: center; cursor: pointer; } .banClass { padding: 0 20px 0 20px; } </style> <script type="text/javascript" src="../../js/jquery-2.1.0.js"></script> <script type="text/javascript" src="../../js/wdatepicker/WdatePicker.js"></script> <script type="text/javascript" src="../../js/handlebars-v1.3.0.js"></script> <script type="text/javascript"> var inputNormalTemp = { 'result_temp' : '<input type="text" id="{{V_KEY}}" name="{{V_KEY}}">' }; var inputDateTemp = { 'result_temp' : '<input type="text" id="{{V_KEY}}" name="{{V_KEY}}" class="Wdate" onfocus="WdatePicker({{V_DateFocus}})">' }; var selectTemp = { 'result_temp' : '<select name="{{V_KEY}}" id="{{V_KEY}}" class="fixClass">' + '<option value="-1">所有</option>' + '{{#each selectData}}' + '<option value="{{S_KEY}}">{{S_VALUE}}</option>' + '{{/each}}</select>' }; var hiddenTemp = { 'result_temp' : '<input type="hidden" id="{{V_KEY}}" name="{{V_KEY}}" value="{{V_VALUE}}" />' }; var typeTemp = { 'text' : inputNormalTemp, 'date' : inputDateTemp, 'select' : selectTemp, 'hidden' : hiddenTemp }; function generateTableData(v_jsonData, v_form) { var jsonData = v_jsonData.data; var varTableHtml = '<table cellpadding="0" cellspacing="0" border="0" width="100%">'; for (var i = 0, len = jsonData.length; i < len;) { varTableHtml += "<tr>"; /* 注意不要越界 */ for (var j = 0; j < 3&&i<len; j++) { var varType = jsonData[i].V_TYPE; var varTemp =Handlebars.compile(typeTemp[varType].result_temp); var varHtml =varTemp(jsonData[i]);/* 注意和上面的变量一样 */ if (varType!='hidden') { varTableHtml += "<td><label>" + jsonData[i].V_NAME + ":</label></td><td>" + varHtml + "</td>"; } else { varTableHtml += varHtml; } i++; } varTableHtml += "</tr>"; } varTableHtml += "</table>"; $('#' + v_form).html(varTableHtml); } var jsonData = { data : [ { V_TYPE : "date", V_KEY : "begin_date", V_NAME : "开始时间", V_DateFocus: "{startDate:'%y',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,maxDate:'#F{$dp.$D(\\'end_date\\')}'}", }, { V_TYPE : "date", V_KEY : "end_date", V_NAME : "结束时间", V_DateFocus:"{startDate:'%y',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,maxDate:'#F{\\'2099-12-31\\'}',minDate:'#F{$dp.$D(\\'begin_date\\')}'}", }, { V_TYPE : "select", V_KEY : "selectId", V_NAME : "测试单选", selectData : [ { S_KEY : "1", S_VALUE : "测试" }, { S_KEY : "2", S_VALUE : "测试2" }, { S_KEY : "3", S_VALUE : "测试3" } ] }, { V_TYPE : "hidden", V_KEY : "hiddenId", V_VALUE : "123" }] }; function closeWin() { var browserName = navigator.appName; if (browserName == "Netscape") { var opened = window.open('about:blank', '_self'); opened.opener = null; opened.close(); } else if (browserName == "Microsoft Internet Explorer") { window.opener = null; window.open('', '_self'); window.close(); } } $(function() { generateTableData(jsonData, "inputForm"); $('#sbtSpan').on('click',function() { var varForm = $('#inputForm').serialize(); console.log(varForm); }); $('#closeSpan').on('click',closeWin); }); </script> </head> <body> <div id="contentDiv"> <div id="titleDiv"> <label>名称:HandlerBars动态生成Input</label> </div> <div id="inputDiv"> <form method="post" action="#" id="inputForm"> </form> </div> <div id="submitDiv"> <span class="spanClass" id="sbtSpan">提交</span> <span class="banClass" /> <span class="spanClass" id="closeSpan">关闭</span> </div> </div> </body> </html>
结果如下:
点击提交,结果为:
其他的效果,如校验,select关联下级select,则需要自己写方法了。
本文系原创,转载请注明出处,谢谢。
全文完。
相关推荐
这个简单的代码示例使用jQuery Ajax和Handlebars JS以及一种方便且易于遵循的自定义提取方法,该方法将将外部html文件中的html内容加载到主html文件中所需的目标元素中。 利用Handlebars JS,您可以选择传递数据以...
Jquery插件,第一步当然要引用Jquery啦,然后引用Handlebars.js即可,仅仅需要这两个js文件。 1 <script type="text/javascript" src="script/jquery.js"> 2 <script type="text/javascript" src="script/...
Handlebars.java 是一个不包含逻辑的,语义的 Java 模板引擎。 Maven: <groupId>com.github.jknack</groupId> <artifactId>handlebars ${handlebars-version} 示例代码: Handlebars handlebars = ...
handlebars官方例子及源代码
handlebars入门教程
handlebars.js
handlebars-v3.0.0.js
前端开源库-yeoman-handlebars-engineyeoman车把引擎,在车把中编写yeoman生成器模板
Laravel开发-handlebars-l4 Laravel4的handlebars.php包装
handlebars模板引擎所需要的js文件 博客文章所需要的js <script src="../js/jquery-1.8.3.min.js"> <script src="../js/handlebars-v3.0.0.js"></script>
与 Sails 命令行界面一起使用的views-handlebars生成器。 安装 某些生成器默认安装在 Sails 中,但它们可以被覆盖。 检查以获取有关安装生成器覆盖/自定义生成器的信息。 生产用途 在命令行上 $ sails generate ...
Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证...
Handlebars.js是一个非常流行的功能强大的模板引擎,简单易用,具备较好的学习社区。利用Handlebars您可以方便的把html从javascript代码中分离出来,从而书写更清晰的代码
handlebars.js v4.0.5 文件下载。 handlebars.js handlebars
Web开发利器,Javascript模版引擎Handlebars.js源文件与示例
handlebars-v2.0.0.js
Handlebars.js 是一个 JavaScript 的页面模板库 标签:Handlebars
前端项目-requirejs-handlebars,RequireJS Handlebars template plugin
前端开源库-skava-handlebars-compilerskava handlebars compiler,grunt task to precompile handlebars.js模板,选项与cli实用程序相同
js模版引擎handlebars.js实用教程demo