新一代 javascript 模板引擎

artTemplate-3.0 新一代 javascript 模板引擎

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>

    <script type="text/javascript" src="js/template.js"></script>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <body>
        <script id="test" type="text/html">
            <h1>{{title}}</h1>
            <ul>
                {{each list as value i}}
                    <li>索引 {{i + 1}} :{{value}}</li>
                {{/each}}
            </ul>
        </script>

        <script type="text/javascript">
            var data = {
                title: ‘标签‘,
                list: [‘文艺‘, ‘博客‘, ‘摄影‘, ‘电影‘, ‘民谣‘, ‘旅行‘, ‘吉他‘]
                        };
            var str = template(‘test‘, data);
            document.body.innerHTML = str;

        </script>
    </body>
</html>

输出内容

标签

索引 1 :文艺
索引 2 :博客
索引 3 :摄影
索引 4 :电影
索引 5 :民谣
索引 6 :旅行
索引 7 :吉他

  

时间: 2024-12-17 23:00:43

新一代 javascript 模板引擎的相关文章

JavaScript模板引擎

JavaScript模板引擎实例应用 在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.artTemplate.doT.baiduTemplate.kissyTemplate等模板引擎. 本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构:

JavaScript模板引擎实例应用

http://www.cnblogs.com/52fhy/p/5393673.html artTemplate 这个还是比较有名的. 简介: artTemplate-3.0 新一代 javascript 模板引擎 https://github.com/aui/artTemplate template.js (简洁语法版, 2.7kb) 支持if等语句{{ if admin }} {{/if}} template(id, data) 根据 id 渲染模板.内部会根据document.getElem

高性能JavaScript模板引擎原理解析

随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来.javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在开源社区中更是百花齐放,在 Twitter.淘宝网.新浪微博.腾讯QQ空间.腾讯微博等大型网站中均能看到它们的身影. 本文将用最简单的示例代码描述现有的 javascript 模板引擎

JavaScript模板引擎实例应用(转)

本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "list": [ { "title": "这是title", "url": "http://www.cnblogs.com/52fhy/p/5271447.html", "desc": "摘要&

推荐13款javascript模板引擎

javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用! 2. EasyTemplate 在使用过Freemarker模 板后,感觉它的 语法比较朴实,平易近人,容易上手,于是决定按它的语法风格实现一个前端的 模板引擎,这就有了

发布一个开源极致的javascript模板引擎tpl.js

tpl.js(大家直接去https://git.oschina.net/tianqiq/tpl.js这个上面看) 简介 tpl.js是一个比较极致(极小,极快,极简单)的js模板引擎,可以在各种js环境中使用. 特性 1. 使用js作为模板语言,几乎无学习成本 2. 小巧,速度快到极致 3. 极简的语法,模板书写非常流畅 4. mit开源,无限制 语法说明 简述 tpl.js中模板语法中以行为单一,分为js行语句,和输出行语句.顾名思义,js行语句是编译时候会当做js执行的语句, 而输出行语句,

JavaScript模板引擎使用

1. [代码]tmpl.js     // Simple JavaScript Templating// John Resig - http://ejohn.org/ - MIT Licensed(function() {var cache = {}; this.tmpl = function tmpl(str, data) { // Figure out if we're getting a template, or if we need to// load the template - an

JavaScript模板引擎学习分享

为了将数据库中的一组记录转换成HTML输出到界面上,大家都采用哪些做法呢? 在WebForm时代我们经常使用datagrid.repeater,当MVC问世后我们开始直接在视图上编写C#循环语句,而现在我更喜欢使用JavaScript模板引擎来生成HTML.因为这种做法的最大好处是实现了前后端代码的解耦,前端开发人员也无需了解太多的C#知识. 用法与示例: 第一步,在页面中引入JavaScript模板引擎: function template(str, data) { var strFunc =

如何选择Javascript模板引擎(javascript template engine)?

译者 jjfat 日期:2012-9-17  来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: 你的到了一个JSON对象,如下: var data={   email: '[email protected],   gender: 'male'  } 然后你需要将json数据组织成页面内容,如下: var email, gender; email= '<div class="mail&q