@Wangww0925
2020-07-03T05:39:33.000000Z
字数 1603
阅读 325
模板引擎 jsRender/jsViews
例子文件位置： F:\web\w-0 笔记\Template\jsRender或jsViews 引入外部模板引擎
模板文件 text.tmpl.html
<p>名称：{^{:name}}</p>
模板文件 nav.html
{{for nav}}<p>{^{:#data}}</p>{{/for}}
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script src="jsrender.min.js"></script><script src="template.js"></script></head><body><p>首页</p><text id="text"><text><div id="bbb"><div></body><script>// 调用模板// new TempRender({ src: './', name: 'text', selector: '#text', data: {name: 'www'} });// 调用自定义模板文件名new TempRender({ srcCustom: true, src: './nav.html', selector: '#bbb', data: { nav: ['www', 'abc', '123']} });</script></html>
(function () {var that = ''var TempRender = function (options) {// console.log(options);that = thisthis.path = options.srcCustom ? options.src : options.src + options.name + '.tmpl.html'; // 模板文件所在位置（包含文件名）【此路径根据调用文件的位置为起始位置】this.selector = options.selector; // 调用模板的标签 id class等，如 '#nav'this.data = options.data; // 数据this.initRender(this); // 此处传入this是为了防止that被污染而导致页面渲染错误}// 此处方法内不能使用that，如果出现多出调用，使用that会污染数据TempRender.prototype.initRender = function (obj) {$.when($.get(obj.path)).done(function (tmplData) {// tmplData 模板文件内容$.templates({tmpl: tmplData});console.log(obj.selector, $.render.tmpl(obj.data))$(obj.selector).html($.render.tmpl(obj.data));})}window.TempRender = TempRender})()
srcCustom 自定义模板文件名，不使用公共的后缀src 必传，模板文件所在位置（不包含文件名）【此路径根据调用文件的位置为起始位置】name srcCustom不填时，必传name。模板文件的前缀，后缀默认 '.tmpl.html'， 可在template.js中修改。selector 必传，调用模板的标签 id class等，如 '#nav'data 数据