博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js模板引擎-art-template常用总结
阅读量:5098 次
发布时间:2019-06-13

本文共 887 字,大约阅读时间需要 2 分钟。

art-template

javascript 模板引擎,官网:

分为原生语法和简洁语法,本文主要是讲简洁语法

  • 基础数据渲染
  • 输出HTML
  • 流程控制
  • 遍历
  • 调用自定义函数方法
  • 子模板引入

基础数据渲染

一、引入art-template.js文件

二、编写HTML模板

三、向模板插入数据,并输出到页面

var data = {    title:"hello world"};var html = template("test",data); document.getElementById('content').innerHTML = html;

输出HTML

//注意:{

{title}}这是对内容编码输出,应该写成{
{#title}}这是对内容不编码输出

 var data = { title:"

hello world

" }; var html = template("test",data); document.getElementById('content').innerHTML = html;

流程控制语句(if else)

{

{if value}}
...
{
{else if value}}
...
{
{else}}
...
{
{/if}}
art-template里面的流程控制就相对其他模板来说强大很多了,直接看例子吧

 

嵌套的写法

 

循环遍历语句

{

{each name}}
索引:{
{$index}}
值:{
{$value}}
{
{/each}}

 

调用自定义方法

通过template.helper(name,fnCallBack)注册方法

可以直接在{
{}}中调用

 

调用子模板

{

{include 'main'}} 引入子模板,数据默认为共享
{
{include 'main' a}} a为制定数据,但是同样必须是父级数据,可以看看下面的例子,如果不注入的a的话,引入的子模板是接受不到数据的

转载于:https://www.cnblogs.com/Jeely/p/11051817.html

你可能感兴趣的文章
搭建 CentOS 6 服务器(15) - Keepalived、HAProxy、LVS
查看>>
优秀IOS开发网站集合
查看>>
hdu 4451水题
查看>>
博客作业2---线性表
查看>>
右击main 方法运行正常,启动tomcat 后,spring boot 项目 出现参数字符串是乱码的情况...
查看>>
javascript朝花夕拾
查看>>
20135335郝爽 & 20135304刘世鹏 实验一
查看>>
多行文本省略号的实现.html
查看>>
写枚举常量
查看>>
[POJ 1004] Financial Management C++解题
查看>>
Oracle基础进阶
查看>>
第一篇随笔, 正在做 ESP32 , STM32 , 树莓派 RaspberryPi 的创客工具
查看>>
电商路演
查看>>
Code Review 转自伯乐在线
查看>>
Pandas plot出图
查看>>
T-SQL 随机返回特定行数据和分页查询
查看>>
SpringBoot2.0之整合Kafka
查看>>
使用 Override 和 New 关键字进行版本控制
查看>>
安装Ubuntu的那些事儿
查看>>
Safari导入书签
查看>>