HandleBars

优秀博客:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html

官网:http://handlebarsjs.com/

注意点:

支持嵌套循环:

this指当前上下文

循环中的索引使用:@index (从0开始的)

{{addOne @index}}
        //注册一个Handlebars Helper,用来将索引+1,因为默认是从0开始的
        Handlebars.registerHelper("addOne",function(index,options){
           return parseInt(index)+1;
        });

扩展方法:

Handlebars.registerHelper用来定义Helper,它有两个参数,第一个参数是Helper名称,第二个参数是一个回调函数,用来执行核心业务逻辑。回调函数可以有至少1个参数,最后一个参数是固定的,就叫options,如果加了该参数,就说明这个Helper是一个Block,块级别的Helper,有一定的语法结构,调用的时候加#号,就像if那样。

关于options的使用,小菜所了解的就是这种用法,return options.fn(this);表示满足条件继续执行,也就是执行{{#compare }}和{{else}}之间的代码;return options.inverse(this);表示不满足条件,也就是执行{{else}}和{{/compare}}之间的代码。

如:

        //注册一个比较大小的Helper,判断v1是否大于v2
78         Handlebars.registerHelper("compare",function(v1,v2,options){
79           if(v1>v2){
80             //满足添加继续执行
81             return options.fn(this);
82           }else{
83             //不满足条件执行{{else}}部分
84             return options.inverse(this);
85           }
86         });
Html编码:

通过{{}}取出来的内容,都会经过编码,也就是说,如果取出的内容中包含html标签,会被转码成纯文本,不会被当成html解析,实际上就是做了类似这样的操作:把<用&lt;替代。

这样做是很好的,既可以显示html代码,又可以避免xss注入。这个功能在做代码展示的时候是非常有用的。

但是有时候我们可能需要解析html,不要转码,很简单,把{{}}换成{{{}}}就可以啦。

				
时间: 2024-12-16 06:07:23

HandleBars的相关文章

Ember.js 入门指南——handlebars属性绑定

本文从http://www.ibeginer.sinaapp.com迁移过来,欢迎访问原页面. 简单讲属性绑定其实就是在HTML标签内(是在一个标签的"<"和">"中使用)直接使用handlebars表达式.可以直接用handlebars表达式的值作为HTML标签中某个属性的值. 准备工作:ember generate route binding-element-attributes 1,绑定字符串 <!-- //  app/templates/b

Handlebars模板引擎渲染页面

基本使用,并简单列举了几种常见的数据格式的渲染方式 js: var testTpl = Handlebars.compile($('#test').html()); //模板 var arr = [1,2,3] //数据 $('#box').append(testTpl(arr)); //调用 html: <script type="text/x-handlebars-template" id="test"> {{#each this}} <li&

Handlebars.js循环中索引(@index)使用技巧(访问父级索引)

使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循环索引很简单,只需在循环中使用{{@index}}即可. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <META http-equiv=Content-Type content="text/html; charset=utf-

进击的handlebars前后端模板引擎

在browser浏览器中使用Handlebars 1 基本语法 <div class="demo"> <h1>{{name}}</h1> <p>{{content}}</p> </div> 2 通过script标签放置模板 <script type="text/template" id="avatarTpl"> <div class="info_b

handlebars简单用法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>handlebars</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv

handlebars自定义helper的写法

handlebars相对来讲算一个轻量级.高性能的模板引擎,因其简单.直观.不污染HTML的特性,我个人特别喜欢.另一方面,handlebars作为一个logicless的模板,不支持特别复杂的表达式.语句,只内置了一些基本的语法,像if.each这些.可惜的是就连if都十分弱,只能判断值是否为true/false,或转化后是否为true/false,不能对值进行比较.不过,handlebars提供了自定义helper的能力,通过自定义helper,可以实现非常丰富的功能.本篇来总结一下hand

Express 4 handlebars 不使用layout写法

Express 4 handlebars 不使用layout写法 Express node nodejs handlebars layout 最近刚开始学习使用nodejs. 使用express搭建了一个基于handlebars的模板引擎的基础项目. 发现所有页面都继承了layout... 那layout怎么才能不继承layout呢? 直接上代码: router.get('/', function(req, res) { res.render('home', {layout: false});

Handlebars 介绍

最新项目用到了Ember.js前端框架,第一次使用这样的框架,准备国庆节花2天时间,研究一下它的用法. Ember框架的模板引擎用到了handlebars, 先看国外的一篇介绍文章:An Introduction to Handlebars, 手动写了一个测试示例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>

Handlebars expressions

Basic Usage 1,最简单的handlebars 表达式 <h1>{{title}}</h1> 使用时,会在当前context里找名为title的property,替换之. 2,handlebars表达式也可以是一个带‘.’的paths <h1>{{article.title}}</h1> 该表达式会在current context里查找article属性,在result里接着找title.如果没有传article变量,页面是不能接收到值,但也不会报