• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > artTemplate基本语法

artTemplate基本语法

作者:汉堡请不要欺负面条 字体:[增加 减小] 来源:互联网 时间:2017-11-21

汉堡请不要欺负面条通过本文主要向大家介绍了artTemplate模板引擎基本语法等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

这边是以标准语法来操作的。javascript引擎的实质就是帮我们把带有JavaScript代码的伪THTML语句编译为HTML。

一.artTemplate基本语法结构

(1).表达式
{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。


(2).输出表达式

2.1对内容编码输出:{{content}}
2.2不编码输出:{{#content}}
编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。


(3).变量

{{set temp = data.sub.content}}

 

(4).条件表达式
{{if admin}}
        <p>admin</p>
{{else if code > 0}}
       <p>master</p>
{{else}}
        <p>error!</p>
{{/if}}

 

(5).遍历表达式
无论数组或者对象都可以用 each 进行遍历。

{{each list as value index}}
    <li>{{index}} - {{value.user}}</li>
{{/each}}


亦可以被简写:
{{each list}}
     <li>{{$index}} - {{$value.user}}</li>
{{/each}}

 

(6).子模板(模板包含表达式)

a.用于嵌入子模板:

{{include './header.art'}}


b.子模板默认共享当前数据,亦可以指定数据:

{{include './header.art' data}}

注意:

①data 数默认值为 $data;标准语法不支持声明 object 与 array,只支持引用变量,而原始语法不受限制。
②art-template 内建 HTML 压缩器,请避免书写 HTML 非正常闭合的子模板,否则开启压缩后标签可能会被意外“优化。

 

(7).辅助方法
a.使用template.helper(name, callback)注册公用辅助方法:

template.helper('dateFormat', function (date, format) {
    // ..
    return value;
});

b.模板中使用的方式:

{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}

 

c.支持传入参数与嵌套使用:
{{time | say:'cd' | ubb | link}}

 

(8).过滤器
a.注册过滤器

template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.timestamp = function(value){return value * 1000};


过滤器函数第一个参数接受目标值。

b.语法:{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}
{{value | filter}} 过滤器语法类似管道操作符,它的上一个输出作为下一个输入。

 

二.模板继承

语法:{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}

模板继承允许你构建一个包含你站点共同元素的基本模板“骨架”。范例:

 


<!--layout.art-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{block 'title'}}My Site{{/block}}</title>
    {{block 'head'}}
    <link rel="stylesheet" href="main.css">
    {{/block}}
</head>
<body>
    {{block 'content'}}{{/block}}
</body>
</html>

<!--index.art-->
{{extend './layout.art'}}
{{block 'title'}}{{title}}{{/block}}
{{block 'head'}}
    <link rel="stylesheet" href="custom.css">
{{/block}}
{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}

 

渲染 index.art 后,将自动应用布局骨架

 

 

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11canvas 弹幕效果(实例分享)
  • 2017-05-11详解webpack+es6+angular1.x项目构建
  • 2017-08-26Math对象常用属性与方法详解
  • 2017-05-11JS触摸事件、手势事件详解
  • 2017-05-11js实现仿购物车加减效果
  • 2017-05-11js实现文本上下来回滚动
  • 2017-05-11老生常谈的跨域处理
  • 2017-05-11Vue.Js中的$watch()方法总结
  • 2017-05-11JavaScript简单生成 N~M 之间随机数的方法
  • 2017-05-11javaScript基础详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 详解打造 Vue.js 可复用组件
    • 微信小程序 swiper制作tab切换实现附源码
    • jQuery实现单击按钮遮罩弹出对话框效果(2)
    • canvas滤镜效果实现代码
    • Bootstrap导航条鼠标悬停下拉菜单
    • URL中“#” “?” &“”号的作用浅析
    • js 控制 history 返回事件
    • JavaScript 实现 Tab 点击切换实例代码
    • JS仿Base.js实现的继承示例
    • Jquery鼠标放上去显示全名的实现方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有