https://github.com/blueimp/JavaScript-Templates

https://blueimp.github.io/JavaScript-Templates/

https://github.com/blueimp/JavaScript-Templates/blob/master/README.md

template

<h3>{%=o.title%}</h3>
<p>Released under the
<a href="{%=o.license.url%}">{%=o.license.name%}</a>.</p>
<h4>Features</h4>
<ul>
{% for (var i=0; i<o.features.length; i++) { %}
<li>{%=o.features[i]%}</li>
{% } %}
</ul>

data

{
"title": "JavaScript Templates",
"license": {
"name": "MIT license",
"url": "https://opensource.org/licenses/MIT"
},
"features": [
"lightweight & fast",
"powerful",
"zero dependencies"
]
}

显示

Render the result by calling the tmpl() method with the id of the template and the data object as arguments:

document.getElementById("result").innerHTML = tmpl("tmpl-demo", data);

Templates syntax

Interpolation

Print variable with HTML special characters escaped:

<h3>{%=o.title%}</h3>

Print variable without escaping:

<h3>{%#o.user_id%}</h3>

Print output of function calls:

<a href="{%=encodeURI(o.url)%}">Website</a>

Use dot notation to print nested properties:

<strong>{%=o.author.name%}</strong>

Evaluation

Use print(str) to add escaped content to the output:

<span>Year: {% var d=new Date(); print(d.getFullYear()); %}</span>

Use print(str, true) to add unescaped content to the output:

<span>{% print("Fast &amp; powerful", true); %}</span>

Use include(str, obj) to include content from a different template:

<div>
{% include('tmpl-link', {name: "Website", url: "https://example.org"}); %}
</div>

If else condition:

{% if (o.author.url) { %}
<a href="{%=encodeURI(o.author.url)%}">{%=o.author.name%}</a>
{% } else { %}
<em>No author url.</em>
{% } %}

For loop:

<ul>
{% for (var i=0; i<o.features.length; i++) { %}
<li>{%=o.features[i]%}</li>
{% } %}
</ul>

文件结构分析

有3个Function in Dart,分别是load,func,encode

另外有6个字段

JavaScript-Templates的更多相关文章

  1. [CSSinJS] Convert Sass (SCSS) Styled Button to CSSinJS with JavaScript Templates and Variables

    This is an introduction to CSSinJS that doesn't require any JavaScript knowledge, just a basic CSS. ...

  2. 全新ASP框架——IISNODE介绍

    Asp是一门经典的动态网页编程语言,通常使用vbscript或者Jscript脚本来实现.一个好的框架,可以帮助您更加快速地使用Asp来完成您的网站开发任务.而Asp框架的终结者——IISNODE框架 ...

  3. jQuery File Upload

    jQuery File Upload介绍.............................................. 2 实现基本原理......................... ...

  4. 如何开始一个模块化可扩展的Web App(转)

    原文链接:http://avnpc.com/pages/start-a-modular-extensible-webapp 日志未经声明,均为AlloVince原创.版权采用『 知识共享署名-非商业性 ...

  5. NodeJS 入门第二天(EJS模板)

    一.复习 复习:Node.js开发服务器,数据.路由.本地关心的效果,交互: Node.js实际上是极客开发出的一个小玩具,不是银弹.有着别人不具备的怪异特点: 单线程.Non-blocking I/ ...

  6. NodeJS入门简介

    NodeJS入门简介 二.模块 在Node.js中,以模块为单位划分所有功能,并且提供了一个完整的模块加载机制,这时的我们可以将应用程序划分为各个不同的部分. const http = require ...

  7. HtmlWebpackPlugin用的html的ejs模板文件中如何使用条件判断

    折腾: [已解决]给react-hot-boilerplate中的index.html换成用HtmlWebpackPlugin自动生成html 期间,已经有了思路了,但是不知道如何在ejs的html中 ...

  8. EJS 入门学习

    EJS(Embedded JavaScript templates)是一个简单高效的模板语言,通过数据和模板,可以生成HTML标记文本.可以说EJS是一个JavaScript库,EJS可以同时运行在客 ...

  9. 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)

    0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating developmen ...

  10. node.js初识11

    1.EJS  Embedded JavaScript templates 模板引擎 .EJS的效率不高,因为他后台是通过字符串来处理的 <ul> <% for(var i = 0 ; ...

随机推荐

  1. Java Springboot 根据图片链接生成图片下载链接 及 多个图片打包zip下载链接

    现有一些图片在服务器上的链接,在浏览器中打开这些链接是直接显示在浏览器页面的形式. 现在需要生成这些图片的单独下载以及打包下载链接,即在浏览器中打开下载链接后弹出下载框提示下载.由于前端存在跨域问题, ...

  2. c++primer chapter three

    3.1命名空间的using声明 using声明具有如下的形式:using namespace :: name; #include <iostream> using std :: cout; ...

  3. 【输入法】向Android端Gboard字典中导入PC端搜狗细胞词库

    [输入法]向Android端Gboard字典中导入PC端搜狗细胞词库 环境 Android 5.1.1 Gboard 8.7.10.272217667-release -armeabi-v7a PC端 ...

  4. css是干什么的

    css这些长篇累牍的参数,其实就是这些所谓的css编程者每天要干的事情了,他们把这些参数熟记于心,就像c++程序员,把这些函数库熟记于心一样,都是编程. css定制了每一个单独的组件,这些组件要么是相 ...

  5. read、readline 和 readlines 的区别?

    假设a.txt的内容如下所示: 1 Hello 2 Welcome 3 What is the fuck... read:读取整个文件. read([size])方法从文件当前位置起读取size个字节 ...

  6. ☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Java——绘制五角星

    Java2D支持通过GeneralPath实现绘制任意的几何形状. 步骤:1)实例化GeneralPath对象 2)调用moveTo()方法锚地开始点坐标 3)调用lineTo()或curveTo() ...

  8. Python 中Semaphore 信号量对象、Event事件、Condition

    Semaphore 信号量对象 信号量是一个更高级的锁机制.信号量内部有一个计数器而不像锁对象内部有锁标识,而且只有当占用信号量的线程数超过信号量时线程才阻塞.这允许了多个线程可以同时访问相同的代码区 ...

  9. c# wpf 加密文本

    可以加密人们的内容,文本加密. 界面 <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation& ...

  10. JavaEE高级-SpringMVC学习笔记

    *SpringMVC概述 - Spring为展示层提供的基于MVC设计理念的优秀Web框架,是目前最主流的MVC框架之一 - Spring3.0后全面超越Struts2,成为最优秀的MVC框架 - S ...