JavaScript HTML Handlebars Template

/*********************************************************************
 *             JavaScript HTML Handlebars Template
 * 说明:
 *     最近在折腾PHP发现JavaScript能处理的事情远不止自己目前处理的事情,
 * 发现有JavaScript HTML框架,这样在GitHub上配合JSON作为配置,就可以自由
 * 组合静态网站了。
 *
 *                                   2017-8-24 深圳 龙华樟坑村 曾剑锋
 ********************************************************************/

一、参考文档:
    1. Top 10 Templating Engines for JavaScript To Improve and Simplify Your Workflow 2017
        https://colorlib.com/wp/top-templating-engines-for-javascript/
    2. Handlebars
        http://handlebarsjs.com/
    3. Handlebars Getting Started
        http://handlebarsjs.com/

二、大致使用方法:
    1. 变量占位符: {{ 变量名 }}
        <div class="entry">
          <h1>{{title}}</h1>
          <div class="body">
            {{body}}
          </div>
        </div>
    2. 将template放在<script>标签中,感觉在页面第一次渲染的时候是不错的方法:
        <script id="entry-template" type="text/x-handlebars-template">
          <div class="entry">
            <h1>{{title}}</h1>
            <div class="body">
              {{body}}
            </div>
          </div>
        </script>
    3. 编译template:
        var source   = $("#entry-template").html();
        var template = Handlebars.compile(source);
        $(body).html(html);
    4. HTML转义字符:
        使用{{}}会将HTML中的转义字符进行替换,使用{{{}}}就可以避免;
    5. template注释:
        <div class="entry">
          {{!-- only output author name if an author exists --}}
          {{#if author}}
            <h1>{{author.firstName}} {{author.lastName}}</h1>
          {{/if}}
        </div>
时间: 2024-11-08 22:41:42

JavaScript HTML Handlebars Template的相关文章

javascript模板引擎template.js使用

到GitHub上下载template.js库.引入到页面 以type="text/html" 这样指定javascript类型的是一种javascript模板渲染方法,在实际项目中,我们非常有用. 模板逻辑语法开始与结束的界定符号为<% 与%>,若<%后面紧跟=号则输出变量内容. 然后页面上就会展现: 原文地址:https://www.cnblogs.com/weiyf/p/9060520.html

Javascript Module pattern template. Shows a class with a constructor and public/private methods/properties. Also shows compatibility with CommonJS(eg Node.JS) and AMD (eg requireJS) as well as in a br

/** * Created with JetBrains PhpStorm. * User: scotty * Date: 28/08/2013 * Time: 19:39 */ ;(function(global){ "use strict"; var M = function() { // Constructor. arguments are passed // from Module() call. this refers to m. function init() { meth

JavaScript Template JST模板引擎----Trimpath [转]

官方网址:http://trimpath.com/project/wiki/JavaScriptTemplates Trimpath JavaScript 是个轻量级的,基于JavaScript的,跨浏览器,采用APL/GPL开放源代码协议的,可以让你轻松进行基于模板编程方式的纯JS引擎. 它有如下的特点:1.采用标准的JavaScript编写,支持跨浏览器 2.模板语法类似于:FreeMarker,Velocity,Smarty3.采用简易的语言来描述大段的字串以及Dom/DHTML操作 4.

Learning JavaScript Design Patterns -- A book by Addy Osmani

Learning JavaScript Design Patterns A book by Addy Osmani Volume 1.6.2 Tweet Copyright © Addy Osmani 2015. Learning JavaScript Design Patterns is released under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 unported license. It

Handlebars模板引擎

Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度.Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板. 使用与安装 Handlebars的安装非常简单,你只需要从Github下载最新版本,你也可访问下面网址获取最新信

JavaScript模板引擎实现数据交互

经过1年的磨练,近期终于稍微明白到,前端是怎么做到企业要求的:数据交互. 1,ajax+json这个是必须学的,但没问题,我们可以通过这个博客来慢慢了解怎么回事? 2,可以通过JS框架和JS模板来实现,但最后还是要用到ajax+json的. 注意:个人建议 假如项目页面数量是少于50-100个的,那么推荐使用JS模板:如果大于100个的用JS框架.各有各优势嘛. 今晚的博客分几次写完,看到这句话删除就证明已经写完了. 先分享JS模板的内容:我这次推荐使用百度的模板引擎,因为他比腾讯的art运行速

新一代 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> <

JQuery html API支持解析执行Javascript脚本功能实现-代码分析

JQuery html用法(功能类似innerHTML) 开发中需要使用Ajax技术来更新页面局部区域, 使用的方法是ajax获取html代码段(字符串),然后将这个html代码段作为参数,传入目标DOM(JQuery对象)的JQuery html接口,此语句执行后, 会将html代码段解释执行, 显示出html代码段描述的页面控件. 例如: <html> <head> <script type="text/javascript" src="./

Javascript:自己写模板引擎

背景 因为JS没有提供“字符串插入”和“多行字符串”特性,传统的拼凑字符串容易出错.性能不高和不容易理解代码,为了应对这些问题,很多个人和团队开发了模板引擎,现在主流的JS框架几乎都提供此类功能了. 模板引擎的实现方式有很多种,此处介绍一种简单.灵活和强大的思路,该方式借鉴了 JSP(web 服务器最终将 JSP 页面转换为了 Servlet),编译后会把模板转换为一个方法. 这个实现只是为团队介绍模板引擎的原理,具体应用还需要选择成熟的开源实现. 实现 1 <!DOCTYPE html> 2