artTemplate

模板引擎artTemplate的使用

由 半世苍凉 提交于 2019-12-03 05:23:40
无论是Ajax还是跨域，目的都是为了 获取服务器的数据 ，获取数据之后，对前端界面进行渲染。 怎么渲染前端界面呢？ 前端界面都是由标签构成的，所以前端界面的渲染主要做的就是 生成html标签 。 生成html标签，可以通过拼接字符串的方式来实现。但是这种方式在标签结构比较复杂的情况下，很不好操作和后期维护，并且容易出错。 通过模板引擎可以很方便地生成html标签。 模板引擎的本质：将数据和模板结合起来生成html片段。所以模板引擎需要两个组成部分：模板和数据，通过数据，将模板指定的标签动态生成，方便维护。 常见的模板引擎有很多，这里使用腾讯公司开源的模板引擎：artTemplate。 使用步骤： 1、引入template.js文件 2、定义模板 3、将数据和模板结合起来生成html片段 4、将html片段渲染到界面中 基本语法： 得到数据中的值： {{value}} 循环操作： {{each result as value i}} html片段 {{/each}} 转义：#的使用 {{#value}} 条件判断： {{if xxx}} html片段 {{/if}} 技巧：有时候可能需要对原始数据进行加工操作 案例1：基本的循环 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title

artTemplate

由 依然范特西╮ 提交于 2019-12-03 05:23:20
特性 性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（ 性能测试 ） 支持运行时调试，可精确定位异常模板所在语句（ 演示 ） 对 NodeJS Express 友好支持 安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板） 支持 include 语句，可在浏览器端实现按路径加载模板 支持预编译，可将模板转换成为非常精简的 js 文件 模板语句简洁，无需前缀引用数据 支持所有流行的浏览器 快速上手 编写模板 使用一个 type="text/html" 的 script 标签存放模板： <script id="test" type="text/html"> <h1>{{title}}</h1> <ul> {{each list as value i}} <li>索引 {{i + 1}} ：{{value}}</li> {{/each}} </ul> </script> 渲染模板 var data = { title: '标签', list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var html = template('test', data); document.getElementById('content').innerHTML = html; 模板语法

artTemplate 模板补充插件

由 风格不统一 提交于 2019-12-03 05:23:09
template 项目介绍 只是对artTemplate的一个补充，跳过artTemplate渲染模板的操作 项目地址 使用说明 data-* 说明 tpl主模板 includes //引用的子模板 必定是远程模板 remote //远程加载数据 onbefore //发起远程请求前响应 onafter //数据请求成功后响应 onrender //模板准备渲染 可修改数据 onload, //模板渲染完成之后 storage //数据key 本地（方法）或者缓存 others //其他数据 本地（方法）或者缓存 模板文件中可使用context数据对象 模板文件编写方式与artTemplate模板写法一致 $. fn .template.globalSettings //可配置模板默认参数或者全局回调 $. fn .template.globalSettings.base={tpl: '' ,remote: '' } 可配置远程模板以及远程数据访问域名 示例： <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Title </ title > < script type = "text/javascript" src = "js/jquery-1.12.3.min

artTemplate 引入模板页

由 五迷三道 提交于 2019-12-03 05:19:00
参考资料： https://github.com/aui/artTemplate 以上是官方文档以及下载地址。 一：安装使用 下载artTemplate后，找到template.js，引入到页面即可 引入代码： < script type = "text/javascript" src = "artTemplate/dist/template.js" > </ script > 1 二：最基本的使用方法 官方给出的小demo就是最基本的使用方法： <!DOCTYPE HTML> < html > < head > < meta charset = "UTF-8" > < title > basic-demo </ title > < script src = "../dist/template.js" > </ script > </ head > < body > < div id = "content" > </ div > < script id = "test" type = "text/html" > {{ if isAdmin }} <h1> {{ title }} < /h1> <ul> {{ each list as value i }} <li>索引 {{ i + 1}} ： {{ value }} < /li> {{ / each }} < /ul> {{ /

arttemplate入门

由 帅比萌擦擦* 提交于 2019-12-03 05:18:27
arttemplate是JavaScript模板引擎，使用时需引入其对应的js文件： arttemplate.js 简洁语法版 arttemplate-native.js 原生语法版 arttemplate有两种语法格式（简洁语法和原生语法），本文记录简介语法的使用。 简单应用 准备工作：下载template.js 使用流程：type=”text/html”的script标签存放模板，js中准备数据并渲染 <!-- 引入简洁语法版js文件--> < script type = "text/javascript" src = "arttemplate.js" > </ script > < div id = "content" > </ div > <!-- 编写模板,此模板放在html页面中,模板也可放在js文件中 --> < script id = "contentTemplate" type = "text/html" > <h1> {{ title }} < /h1> <ul> {{ each list }} <li>索引 {{$< span class = "hljs-variable" > index < /span > + 1}} < /span><span class="xml"><span class="javascript"> ：</ span> </ span

模板引擎artTemplate的使用

由 匿名 (未验证) 提交于 2019-12-02 20:32:16
1.引入template文件 <script src = js/template-native.js> </script> 2.写模板 <script type="text/template" id="模板ID"> 　　 模板内容 </script> 3.执行模板 var html = template("模板ID"，数据) 　　**此处的数据必须是对象格式 不是对象要包装成对象的格式------> {"items":data} 4.把模板生成的结构添加到页面 　　$("目标位置").html(html) 转载请标明出处: 模板引擎artTemplate的使用 文章来源: 模板引擎artTemplate的使用

artTemplate js模板引擎动态给html赋值

由 匿名 (未验证) 提交于 2019-12-02 20:30:32
html放到$("#area").append(html);之前，否则文档流获取不到#area <table width="90%" class="table" cellspacing="0" cellpadding="0"> <thead> <tr> <th > 名字 </th> <th > 价格 </th> </tr> </thead> <tbody id="area"> </tbody> </table> <script src="template-web.js"></script> <script id="aaa" type="text/html"> {{each Table as value i}} <tr><td>{{value.Name}}</td><td>{{value.Price}}</td></tr> {{/each}} </script> <script> var json={ Table:[ {Name:'牛肉',Price:'50'}, {Name:'羊肉',Price:'59'}, {Name:'鸡肉',Price:'21'} ] }; var html = template('aaa', json); $("#area").append(html); </script>

art-template过滤器（单值，多值）

由 大城市里の小女人 提交于 2019-11-30 17:59:54
art-template过滤器 链接: 官方文档-过滤器语法 过滤器处理一个值 HTML：<p>共有{{popWindow_val.freeFriend | friendNum}}位好友</p> JS: template.defaults.imports.friendNum = function (value) { var length = value.length; return length; } 过滤器处理两个值 HTML：{{$imports.pkWord(pkList_val.freeTeam,pkList_val.zan)}} JS:template.defaults.imports.pkWord = function (value,zan) { for (var i = 0, len = value.length; i < len; i++) { if (value[i].status == 2 || value[i].status == 3) { return "小组中已有人集齐点赞，赶紧分享好友，完成时间最短即可免单。"; } } var word = 'PK已发起，请在24小时内集齐' + zan + '个赞，小组内完成集赞耗时最短者即可免单。' return word; } 来源： https://my.oschina.net/u/3386302/blog

前端技术之：常见的前端页面模板库

由 倾然丶 夕夏残阳落幕 提交于 2019-11-30 17:59:48
VueJs https://cn.vuejs.org/ https://github.com/vuejs/vue React https://reactjs.org/ Handlebars http://handlebarsjs.com/ https://github.com/wycats/handlebars.js Mustache https://mustache.github.io/ Ejs https://github.com/tj/ejs ArtTemplate http://aui.github.io/art-template/zh-cn/ https://github.com/aui/art-template Jade/Pug http://jade-lang.com/ https://pugjs.org NunJucsks https://mozilla.github.io/nunjucks/ Template7 Template7 is a mobile-first JavaScript template engine with Handlebars-like syntax. https://framework7.io/docs/template7.html UnderscoreJs Template https://underscorejs.org/

ArtTemplate

由 旧城冷巷雨未停 提交于 2019-11-26 01:51:52
简介 artTemplate是新一代的高性能JavaScript模板引擎。 插件官网 http://aui.github.io/art-template/zh-cn/docs/syntax.html 插件下载 完整版： https://github.com/aui/art-template 浏览器版： https://github.com/aui/art-template/tree/master/lib 简单使用 ① 引入template-web.js <script type="text/javascript" src="template-web.js"></script> ② 定义数据结果渲染区 <div id="content"><div> ③ 定义数据模板 使用一个type="text/html"的script标签定义数据存放模板 <script id="data-tpl" type="text/html"> <h1>{{title}}</h1> <ul> {{each list value i}} <li>索引 {{i + 1}} ：{{value}}</li> {{/each}} </ul> </script> ④ 渲染数据 var data = { title: '标签', list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'
订阅 artTemplate