源地址：http://rfyiamcool.blog.51cto.com/1030776/1278620

代码示例：

<!DOCTYPE html>

<html>

  <head>

    <title>Handlebars Expressions Example</title>

  </head>

  <body>

    <h1>Handlebars Expressions Example!</h1>

<!--this is a list which will rendered by handlebars template.    -->

    <div id="list">

    </div>

    <script type="text/javascript" src=\'#\'" /jquery.js"></script>

    <script type="text/javascript" src=\'#\'" /handlebars-1.0.0.beta.6.js"></script>

    <script id="people-template" type="text/x-handlebars-template">

      {{#people}}

        <div class="person">

          <h2>{{first_name}} {{last_name}}</h2>

          <div class="phone">{{phone}}</div>

          <div class="email"><a href="mailto:{{email}}">{{email}}</a></div>

          <div class="since">User since {{member_since}}</div>

        </div>

      {{/people}}

    </script>

    <script type="text/javascript">

      $(document).ready(function() {

        // compile our template

        var template = Handlebars.compile($("#people-template").html());

        var data = {

          people: [

            { first_name: "rui", last_name: "fengyun", phone: "1234567890", email: "alan@test.com", member_since: "Mar 25, 2011" },

            { first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@test.com", member_since: "Jan 13, 2011" },

            { first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@test.com", member_since: "Apr 9, 2009" },

            { first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@test.com", member_since: "May 21, 2010" },

            { first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@test.com", member_since: "Nov 1, 2008" }

          ]

        };

        $('#list').html(template(data));

      });

    </script>

  </body>

</html>

进行遍历里面的数据，print出来

<script id="each-template" type="text/x-handlebars-template">

  {{#each people}}

    ... output person's info here...

  {{/each}}

</script>

有数据的话，进行数据渲染

<script id="each-template" type="text/x-handlebars-template">

  {{#if people}}

    ... output person's info here...

  {{/if}}

</script>

没有数据的话，就写没有数据

<script id="each-template" type="text/x-handlebars-template">

  {{#unless people.length}}

    There aren't any people.

  {{/unless}}

</script>

if else 关联的判断

<script id="each-template" type="text/x-handlebars-template">

  {{#if people.length}}

    ... output person's info here...

  {{else}}

    There aren't any people.

  {{/if}}

</script>

Javascript模板引擎handlebars使用的更多相关文章

  1. Javascript模板引擎handlebars使用实例及技巧

    转:http://rfyiamcool.blog.51cto.com/1030776/1278620 我们在开发的时候针对DOM操作,用简单的JS应用来说不成问题,但如果你对视图的每次更新都需要对我文 ...

  2. JavaScript模板引擎Handlebars

    Handlebars模板库简单介绍 Handlebars是JavaScript一个语义模板库,通过对view(模板)和data(ajax请求的数据,一般是json)的分离来快速构建Web模板.它采用& ...

  3. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  4. 推荐13款javascript模板引擎

    javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...

  5. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  6. 【JavsScript】推荐五款流行的JavaScript模板引擎

    摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...

  7. JavaScript模板引擎artTemplate.js——为什么使用模板引擎？

    作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...

  8. 最简单的JavaScript模板引擎

    在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...

  9. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

随机推荐

  1. Error in Log_event::read_log_event(): 'Event too small', data_len: 0, event_type: 0

    MySQL主从复制报错如下: 2018-04-11 09:11:16 2400 [Note] Slave SQL thread initialized, starting replication in ...

  2. 在ubuntu18.04上安装EOS

    在ubuntu18.04上安装EOS 在ubuntu18.04上安装EOS的目的: 把交易所的eos转到eos主网,防止交易所跑路或者交易所被黑客攻击 在不联网的安全环境下,用eos官方的命令行工具, ...

  3. Windows Server2008 R2安装wampserver缺少api-ms-win-crt-runtime-l1-1-0.dll解决方案

    安装wampserver经常会遇到缺少各种dll文件的问题,可以在安装之前先安装一下微软运行库合集,但此时仍有可能缺少api-ms-win-crt-runtime-l1-1-0.dll文件,那么可以尝 ...

  4. LeetCode算法题-Add Digits（Java实现-3种解法）

    这是悦乐书的第199次更新,第207篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第63题(顺位题号是258).给定非负整数num,重复添加其所有数字,直到结果只有一位数 ...

  5. MySQL知识总结（一）安装与配置（Linux CentOS）

    1 安装 环境 CentOS yum install -y mysql-server mysql mysql-deve service启动 1.1 启动 service mysqld start 1. ...

  6. （转）Spring Boot(六)：如何优雅的使用 Mybatis

    http://www.ityouknow.com/springboot/2016/11/06/spring-boot-mybatis.html 这两天启动了一个新项目因为项目组成员一直都使用的是 My ...

  7. 详解区块链P2P网络

    根据前一篇文章<从微观到宏观理解区块链>我们已经了解到,微观上,区块链本质就是一种不可篡改且可追踪溯源的哈希链条:宏观上,还具备了另外三个基本特征:分布式存储.P2P 网络和共识机制.分布 ...

  8. Python字符串 u"string",r"string"的写法含义

    1.字符串前加 u = unicode编码 例:u"我是含有中文字符组成的字符串." 作用:后面字符串以 Unicode 格式 进行编码,一般用在中文字符串前面,防止因为源码储存格 ...

  9. 【vue】vue +element 搭建项目，vue-cli 如何打包上线

    以自己的项目为例 第一步:手动修改config文件夹中的index.js文件中的build对象,将 assetsPublicPath 中的 “/” ,改为 “你实际的加载路径” 如图: 第二步:执行( ...

  10. Redo丢失的4种情况及处理方法

    这篇文章重点讨论Redo丢失的几种情况,及每种情况的处理方法. 一.说明:1.以下所说的当前日志指日志状态为CURRENT,ACTIVE,非当前日志指日志状态为INACTIVE2.不用考虑归档和非归档 ...