官方网站:http://handlebarsjs.com/ 下载及查看使用帮助,或者用百度cdn引用

一、定义模板

<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h2>{{title}}</h2>
<div>{{body}}</div>
</div>
</script>

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

中间就是要加载的模板样式,"{{}}"为模板加载的位置

二、替换模板内容
另用一个<script>标签书写

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

表示获取 #entry-template 的DOM ,即上段script引用的部分。在用handlebar.js的方法 Handlebars.compile()匹配“{{}}”中得内容

 var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);

context 对象用来定义模板内容

template方法用来加载context,实际上是对模板上对应context的字段替换。

最后输出

 $("#main").html(html);

1.如需要在模板中添加新标签

var context = {title: "My New Post", body: "<p>This is my first post!</p>"};

则用"{{{}}}"方法,可以将标签添加到模板中,否则<p>会显示出来。

另外还有,引用块模板等以后补充

handlebar.js使用的更多相关文章

  1. handlebar.js模板引擎(轻页面小工程可用)

    介绍 Handlebars 让你能够有能力高效地容易地创立语义化的模版.Handlebars兼容Mustache语法,在大多数情况下它可以读取Mustache的语法并在你当前模板中使用.具体点击这里 ...

  2. handlebar JS模板使用笔记

    直接上代码: (定义模板) (编译注入) ***知识点*** //数据必须为Json数据(强调:jsonp数据不行,和json是两种数据,jsonp多了callback回调函数来包裹json数据) 遍 ...

  3. laytpl js模板引擎

    laytpl js模板引擎.laytpl是一款非常轻量的JavaScript模板引擎.地址:http://www.layui.com/laytpl/ 用法与handlebar.js类似,但是比较轻量级 ...

  4. Handlebars.js 预编译(转)

    Handlebars.js 官网上对预编译1是这样说的: 你需要安装 Node.js 你需要在全局环境中,通过 Npm 安装 handlebars 包 然后你就可以通过命令预编译你的 handleba ...

  5. 【Yeoman】热部署web前端开发环境

    本文来自 “简时空”:<[Yeoman]热部署web前端开发环境>(自动同步导入到博客园) 1.序言 记得去年的暑假看RequireJS的时候,曾少不更事般地惊为前端利器,写了<Sp ...

  6. bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用 深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX

    bootstrap-data-target触发模态弹出窗元素的data使用 时间:2017-05-27 14:22:34      阅读:4479      评论:0      收藏:0      [ ...

  7. vue init深度定制团队自己的Vue template

    大家都知道,使用vue-cli可以快速的初始化一个基于Vue.js的项目,全局安装脚手架之后,你可以通过vue list命令看到官方提供的5个模板 vue list 当开发一个独立项目的时候,使用官方 ...

  8. 《Pro Express.js》学习笔记——Express框架常用设置项

    Express 设置 系统设置 1.       无须再定义,大部分有默认值,可不设置 2.       常用设置 env view cache view engine views trust pro ...

  9. 日期加减js,天数组增加,日期自动修改

    最近在弄火车票的项目,因为火车票选日期最大范围是20天,所要要控制在当前时间的20天内的一个日期 开始在网上找了一个直接修改Date prototype 后来领导说这样不太好,所以只能换个别的方法写 ...

随机推荐

  1. Xamarin生成的APK大小分析

    原文:Xamarin生成的APK大小分析 刚接触Xamarin都会被Xamarin的售价吓一跳,另外就是它生成的APK大小,官方也有相关的说明,这里加上自己的理解同意讲解下: 以下是针对Android ...

  2. Android_Intent意图详解

    本博文为子墨原创,转载请注明出处! http://blog.csdn.net/zimo2013/article/details/11863857 1.Intent作用 Intent是一个将要执行的动作 ...

  3. Android之SplashActivity的巧妙之处

    众所周知,我们很多应用都会有一个SplashActivity,用来当作进入应用的第一个过度界面,显示一个logo信息.如下所示,是我的简洁天气的SplashActivity. 但是,它的作用仅仅只是用 ...

  4. Swift语法总结(精简版)

    第一部分: 1. Swift简介 2010年的夏天,苹果公司的开发人员Chris Lattne接到了一个特别的任务,为OS X 和iOS平台开发下一代的编程语言,也就是Swift. 苹果公司于2014 ...

  5. 兔子--Android中的五大布局

    LinearLayout:被称为线性布局,分为水平和垂直,设置的垂直或水平的属性值,来排列全部的子元素.全部的子元素都被堆放在其他元素之后,因此一个垂直列表的每一行仅仅会有一个元素,而无论他们有多宽, ...

  6. Jquer学习之jQuery(function(){})与(function(){})(jQuery)之间的区别

    Jquery是优秀的Javascrīpt框架.我们现在来讨论下在 Jquery 中两个页面载入后执行的函数. $(document).ready(function(){ // 在这里写你的代码... ...

  7. 原生js判断某个元素是否有指定的class名的几种方法

    [注意]以下方法只对class只有一个值的情况下操作 ************************************************************* 结构部分: <d ...

  8. C++_基础_类和对象3

    内容: (1)析构函数 (2)拷贝构造和拷贝赋值 (3)静态成员 (4)成员指针 (5)输入输出运算符重载 1.析构函数 当一个对象被创建时,自动调用构造函数进行初始化 当一个对象被销毁时,自动调用析 ...

  9. Spring——自定义属性编辑器+Bean的生存范围+Bean的生命周期

    一.自定义属性编辑器(一个类): 步骤: 1.写一个类,这个类继承PropertyEditorSupport. 2.重写setAsText()方法. 3.在bean.xml文件中添加属性编辑器的bea ...

  10. css样式写一个三角形

    <style> .test{ border-color:transparent #abcdef transparent transparent; border-style:solid; b ...