template模板引擎基础总结

浅浅的花香味﹌ 2021-12-15 11:43 232阅读 0赞

### 基础数据渲染 ###

引入

<script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/artTemplate/template-native.js"></script>

编写模板

<script id="template" type="text/template">
        <% getConsole().log(list);  %>
        <% jquery()(list).each(function(i, item){%>
        <tr>
            <td><%=i+1%></td>
            <td><%=item.username%></td>
            <td><%=item.password%></td>
            <td><%=item.age%></td>
        </tr>
        <% }) %>
    </script>

插入数据

//解决模板不能访问全局对象的问题
        template.helper("getConsole", function () {
            return console;
        });
        template.helper("jquery", function () {
            return $;
        });
        var data = [
            { "username": "张三", "password" : "1237756" ,"age": 20},
            { "username": "张四", "password" : "123886" ,"age": 21},
            { "username": "张五", "password" : "123996" ,"age": 22},
        ]
        var html = template("template", {list : data})
        $("table").html(html);

html结构里放一个table，就可以接收数据并渲染到页面

### 流程控制语句 ###

{
       {if value}}
    ...
    {
       {else if value}}
    ...
    {
       {else}}
    ...
    {
       {/if}}

### 遍历循环语句 ###

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

发表评论取消回复

表情：

评论列表（有 0 条评论，232人围观）

还没有评论，来说两句吧...

相关阅读

相关二级事件art-template模板引擎

2级DOM事件在上面的图片里，我们可以看到，在每一个对象的最后一层，它都是一个EventTarget，在这个对象里面，它有下面三个方法 `1.`addEventLi

矫情吗；*/ 2022年12月10日 01:19/ 0 赞/ 95 阅读

相关 template.js前端模板引擎使用

下载地址 [https://github.com/yanhaijing/template.js][https_github.com_yanhaijing_template

╰+哭是因爲堅強的太久メ/ 2022年09月22日 11:45/ 0 赞/ 207 阅读

相关 nodejs+art-template配置模板引擎

什么是art-template art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript

亦凉/ 2022年08月28日 13:49/ 0 赞/ 188 阅读

相关 JS模板引擎art-template

> art-template 是一个简约、超快的模板引擎。 > 它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持

我会带着你远行/ 2022年05月13日 06:28/ 0 赞/ 188 阅读

相关 nodejs（九）art-template模板引擎

nodejs中可以使用模板引擎，其中art-template既可以用在前端，也可以用在服务器端，首先看一下前端用法 <!DOCTYPE html> <html

àì夳堔傛蜴生んèń/ 2022年05月11日 12:42/ 0 赞/ 193 阅读

相关 js模板引擎-art-template常用总结

art-template javascript 模板引擎，官网：[https://github.com/aui/art-template][https_github

短命女/ 2022年04月11日 02:12/ 0 赞/ 296 阅读

相关 template模板引擎渲染

<div class="problems" id="content"> </div> <script id="test" type="text

深藏阁楼爱情的钟/ 2022年02月09日 14:11/ 0 赞/ 259 阅读

相关 template模板引擎基础总结

基础数据渲染引入  <script src="lib/jquery/jquery.min.js"></script>

浅浅的花香味﹌/ 2021年12月15日 11:43/ 0 赞/ 233 阅读

相关模板引擎------art-template的开始

说明 art-template is a simple and superfast templating：简单和超快的特点，有统一的模板，会让开发更加统一和维护。更

红太狼/ 2021年11月17日 06:48/ 0 赞/ 265 阅读

相关 koa art-template模板引擎

优势:速度极快,能接近js的极限速度 1、安装 npm install --save art-template npm insta

怼烎@/ 2021年07月25日 00:22/ 0 赞/ 404 阅读