arttemplate语法 | 易学教程

artTemplate 简介语法模板

阅读更多关于 artTemplate 简介语法模板

1.编辑模板，template(id, data) 根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。如果没有 data 参数，那么将返回一渲染函数。data参数的类型是object。有 data 那么就返回 Html。 var data = { title: '标签', list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var html = template('test', data); document.getElementById('content').innerHTML = html; <script id="test" type="text/html"> <h1>{{title}}</h1>//直接使用data里的属性title <ul> {{each list as value i}}//直接可遍历data里面的list属性，list是一个数组 <li>索引 {{i + 1}} ：{{value}}</li> {{/each}} </ul> </script> //渲染数据 var data = { title: '标签', list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'] }; var html = template(

artTemplate的简单用法

阅读更多关于 artTemplate的简单用法

在实际开发中，我们会使用模板引擎来提高开发效率。而众多的模板引擎中，artTemplate无论就速度，兼容性还是使用人数上，都占绝对优势。这里我将简单地介绍下artTemplate的常见用法。对于这其中涉及到的语法，我们只需要记住并且会用即可，不需要知道为什么这样用用法一：使用渲染模板需要先使用一个type="text/html"的script标签存放模板 1.简单的json数据 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/template.js" ></script> </head> <body> <div id="container"></div> <script type="text/html" id="div"> <h1>{{name}}</h1> <h2>{{age}}</h2> </script> <script type="text/javascript"> var data = { name:"geekWeb", age:22 } var html = template('div',data); document.getElementById("container").innerHTML =

artTemplate 模板引擎（简洁语法/原生语法）

阅读更多关于 artTemplate 模板引擎（简洁语法/原生语法）

1. artTemplate 简洁语法模板（1）引入插件： < script src = "template.js" ></ script > （2）编写模板： < script id = "test" type = "text/html" > <h1> {{ title }}</ h1 > <ul> {{ each list as value i }} <li> 索引 {{ i + 1 }} ：{{ value }}</ li > {{/ each }} </ ul > </ script > （3）渲染数据： var data = { title : '标签' , list : [ '文艺' , '博客' , '摄影' , '电影' , '民谣' , '旅行' , '吉他' ] }; var html = template ( 'test' , data ); document . getElementById ( 'content' ). innerHTML = html ; （4）简洁语法： {{ if admin }} {{ include 'admin_content' }} {{ each list }} <div> {{ $index }}. {{ $value . user }}</ div > {{/ each }} {{/ if }} 2.

模板引擎artTemplate 介绍

阅读更多关于模板引擎artTemplate 介绍

一.介绍 (1).介绍 art-template 是一个简约、超快的模板引擎。artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。 (2).性能 1.性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍 2.支持运行时调试，可精确定位异常模板所在语句 3.对 NodeJS Express 友好支持 4.安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板） 5.支持include语句 6.可在浏览器端实现按路径加载模板 7.支持预编译，可将模板转换成为非常精简的 js 文件 8.模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选 9.支持所有流行的浏览器二.模板 (1).模板 artTemplate的库分为两种，一个是template.js，一个是template-native.js,第一个是标准语法（简洁语法版），第二个是原生语法（感觉像JSP）版，两个库的语法是不一样的，大家不要混用，否则会报错的。标准语法： {{if user}} <h2>{{user.name}}</h2> {{/if}} 原始语法： <% if (user) { %> <h2><%= user

模板引擎artTemplate的使用

阅读更多关于模板引擎artTemplate的使用

无论是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

阅读更多关于 artTemplate

特性性能卓越，执行速度通常是 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入门

阅读更多关于 arttemplate入门

arttemplate是JavaScript模板引擎，使用时需引入其对应的js文件： arttemplate.js 简洁语法版 arttemplate-native.js 原生语法版 arttemplate有两种语法格式（简洁语法和原生语法），本文记录简介语法的使用。简单应用准备工作：下载template.js 使用流程：type=”text/html”的script标签存放模板，js中准备数据并渲染  < script type = "text/javascript" src = "arttemplate.js" > </ script > < div id = "content" > </ div >  < 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

阅读更多关于 ArtTemplate

简介 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语法