arttemplate3.0使用教程语法详解

 PHP   高蒙   阅读(3718)   评论(0)   2016-06-27 21:49:14    js模板引擎 arttemplate教程 arttemplate语法 模板引擎 arttemplate 


做网站评论的时候,我想到了用js模板引擎arttemplate去做。首先我要说下,为什么要使用arttemplate模板引擎不使用第三方的社交评论插件?评论作为网站不可或缺的一部分,数据的质量要求不高,对于网站的seo可有可无。

之前使用畅言和多说,我发现有个问题就是每次页面加载的时候,都比较的慢。这也是我放弃第三方的主要原因。

还有就是在使用第三方社交评论的时候,很显然的看到,自己写的文章被他们抓取了,感觉不爽。这是次要原因。

闲话,不扯了,下面我们看看arttemplatejs模板引擎的具体使用方法?

arttemplatejs模板引擎下载地址:https://github.com/aui/artTemplate

第一:特性

性能卓越,执行速度通常是 Mustachetmpl 的 20 多倍

支持运行时调试,可精确定位异常模板所在语句

NodeJS Express 友好支持

安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)

支持include语句,可在浏览器端实现按路径加载模板

支持预编译,可将模板转换成为非常精简的 js 文件

模板语句简洁,无需前缀引用数据

支持所有流行的浏览器

第二:arttemplate模板引擎具体的使用。

1、引入template.js。这里说明一下。arttemplatejs模板引擎提供两套语法。

   简洁版语法加载js:template.js (简洁语法版, 2.7kb)

   原生版语法加载js:template-native.js (原生语法版, 2.3kb)

我和个人觉得使用简洁版就好了,用起来比较简单。

简洁版语法和原生版语法讲解在下面。

2、编写前端的模版

// 数据写入的位置
<div id="content"></div> 
// js模板样式
<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、模板语法

有两个版本的模板语法可以选择。

1).简洁语法

推荐使用,语法简单实用,利于读写。

{{if admin}}
    {{include 'admin_content'}}
    {{each list}}
        <div>{{$index}}. {{$value.user}}</div>
    {{/each}}
{{/if}}
2).原生语法
<%if (admin){%>
    <%include('admin_content')%>
    <%for (var i=0;i<list.length;i++) {%>
        <div><%=i%>. <%=list[i].user%></div>
    <%}%>
<%}%>

5、下面主要介绍简洁版语法。

5.1、表达式
{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。
输出表达式
5.2、对内容编码输出:
{{content}}
5.3、不编码输出:
{{#content}}

编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。

5.4、条件表达式
{{if admin}}
    <p>admin</p>
{{else if code > 0}}
    <p>master</p>
{{else}}
    <p>error!</p>
{{/if}}
5.5、遍历表达式

无论数组或者对象都可以用 each 进行遍历。

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

亦可以被简写:

{{each list}}
    <li>{{$index}} - {{$value.user}}</li>
{{/each}}
5.6、模板包含表达式

用于嵌入子模板。

{{include 'template_name'}}


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

{{include 'template_name' news_list}}
5.7、辅助方法

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

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

模板中使用的方式:

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

支持传入参数与嵌套使用:

{{time | say:'cd' | ubb | link}}

到这里arttemplatejs模板引擎最基本的使用方法就介绍完毕了。要是想更多的了解arttemplatejs模板引擎的使用方法,请看官网的介绍。


第三:实例。如何正确的使用arttemplatejs模板引擎。

我这里是那thinkphp的使用来讲解,程序思路是一样的。可以借鉴。

php代码:

$data = M('table')->select();
// 切记将数据打包成json格式
$this->assign('data',json_encode($data));
$this->display();

如图:

1.png

前端模板页面:

<div id="content"></div>
<script id="test" type="text/html">
    <ul>
    {{each list as value i}}
        <li>{{i}} => {{value.title}}</li>
    {{/each}}
    </ul>
</script>
<script>
    var data = {
        list: {$data}, // 你所查询到的数据 json字符串
    };
    var html = template('test', data);
    document.getElementById('content').innerHTML = html;
</script>

如图:

2.png

到这里arttemplatejs模板引擎的使用方法就介绍完毕了。感兴趣的赶紧试试吧。





相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客