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

我们在开发的时候针对DOM操作,用简单的JS应用来说不成问题,但如果你对视图的每次更新都需要对我文档中非常大量的块进行操作呢?这时JS模版就派上用场了。

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

这是一个实例,我们可以把json的数据,按照自己的想法嵌入到模板里面。

<!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>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索handlebars的使用
, 数据
, com
, handlebars express
, test
, phone
, email
, handlebars
express模板引擎
handlebars模板引擎、javascript 模板引擎、handlebars 模板、handlebars 子模板、handlebars 模板嵌套,以便于您获取更多的相关知识。

时间: 2024-10-07 07:13:32

Javascript模板引擎handlebars使用实例及技巧的相关文章

JavaScript模板引擎用法实例_javascript技巧

本文实例讲述了JavaScript模板引擎用法.分享给大家供大家参考.具体如下: 这里介绍的这个模板引擎写得短小精悍,非常值得一看 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'r

常用的JavaScript模板引擎介绍_javascript技巧

最近工作内容慢慢接近我的理想化(web前端),所以关注比较多的是前端性能!后台同事介绍使用ajax模板引擎,提高渲染速度! 下面介绍几款 JavaScript 模板引擎 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft's jQuery template plugin,但更简单易用! 2. doT.js doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎. 3. jSmart jSmart 是著名的 PHP 模板引擎 S

JavaScript模板引擎Template.js使用详解_javascript技巧

template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.https://github.com/aui/artTemplate 1.特性 (1).性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)(2).支持运行时调试,可精确定位异常模板所在语句(演示) (3).对 NodeJS Express 友好支持(4).安全,默认对输出进行转义.

JavaScript模板引擎开发实例

随着Nodejs的流行,JavaScript在前端和后端都开始流行起来.有许多成熟的JavaScript模板引擎,例如Swig,既可以用在后端,又可以用在前端. 不过很多时候,前端模板仅仅需要简单地创建一个HTML片段,用Swig这种全功能模板有点大材小用.我们来尝试自己编写一个简单的前端模板引擎,实际上并不复杂. 在编写前端模板引擎代码之前,我们应该想好如何来调用它,即这个模板引擎的接口应该是什么样的.我们希望这样调用它: // 创建一个模板引擎: var tpl = new Template

探究Javascript模板引擎mustache.js使用方法_javascript技巧

我们将为大家详解Mustache.js轻量级JavaScript模版引擎使用方法. 简单示例 function show(t) { $("#content").html(t); } var view = { title: 'YZF', cacl: function () { return 6 + 4; } }; $("#content").html(Mustache.render("{{title}} spends {{cacl}}", view

高性能JavaScript模板引擎实现原理详解_javascript技巧

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

javascript轻量级模板引擎juicer使用指南_javascript技巧

使用方法 编译模板并根据数据立即渲染出结果 juicer(tpl, data); 仅编译模板暂不渲染,返回一个可重用的编译后的函数 var compiled_tpl = juicer(tpl); 根据给定的数据对之前编译好的模板进行渲染 var complied_tpl = juicer(tpl); var html = complied_tpl.render(data); 注册/注销自定义函数(对象) juicer.register('function_name', function); ju

详解Javascript模板引擎mustache.js_javascript技巧

本文总结它的使用方法和一些使用心得,内容不算很高深,纯粹是入门内容,看看即可.不过要是你还没有用过此类的javascript引擎库,那么本文还是值得你一读的,相信在你了解完它强大的功能和简单用法之后,一定会迫不及待地将之用于你的工作当中. 1. 从一个简单真实的需求讲起目前公司做了一个统一的开发平台,后台封装了MVC的接口和数据增删改查的接口,前端我自己用bootstrap+手写各类组件的方式弄了一套开发框架:集成了CAS,在CAS的基础上,首先做了一套统一权限管理系统,这个系统是我们开发平台的

常用的JavaScript模板引擎介绍

这篇文章主要介绍了常用的JavaScript模板引擎介绍,本文介绍了8款常用JavaScript 模板引擎,着重讲解了artTemplate模板引擎,需要的朋友可以参考下     最近工作内容慢慢接近我的理想化(web前端),所以关注比较多的是前端性能!后台同事介绍使用ajax模板引擎,提高渲染速度! 下面介绍几款 JavaScript 模板引擎 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft's jQuery template plugin,但更简