6月25日，寻游json挖下的坑
心中潜藏的固执终于爆发，因为开始于杨元的博客，固执于每一次渲染开始于循环、结束于循环。进入了一个关于json格式的死循环，还不愿意醒，重复自己模拟json、取json，但是就是不愿意在自己得到的json中去直接查找直接渲染。真是执着于一个不怎么好的实现，还沾沾自喜，认为自己发现了无人的小角落，殊不知是一个路旁的可见底的涵洞，探之无味。
handlebars函数方法
前一章对handlebars使用的一些思想进行了介绍，这里是承接它对handlebars的使用进行一些补充，不能保证全面，但是我会坚持不断发现，不断补充，完善handlebars的使用。
- handlebars大的使用前奏-三点
- 引用库
<script src="jquery/jquery.js"></script>
<script src="handlebars/handlebars-v3.0.1.js"></script>
- 页面数据渲染与实现
<script id ="table-template" type="text/x-handlebars-template">
{{data}}
</script>
- 相应js获取json并渲染（一般使用ajax）
<script src="handle.js"></script>
var data = {"data":"data"};
var myTemplate = Handlebars.compile($("#table-template").html());
$('body').html(myTemplate(data));
//这里利用jquery实现对handlebars的编译与页面的实现
var source = "<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " +
"{{kids.length}} kids:</p>" +
"<ul>{{#kids}}<li>{{name}} is {{age}}</li>{{/kids}}</ul>";
var template = Handlebars.compile(source);
var data = { "name": "Alan", "hometown": "Somewhere, TX",
"kids": [{"name": "Jimmy", "age": "12"}, {"name": "Sally", "age": "4"}]};
var result = template(data);
- handlebars正式使用的语句
- 注释
不能使用其他的注释方法：// /**/等，在handlebars都会报错，只能用
{{! 这是一个注释}}
{{!-- 一起消失吧--}}
- handlebars表达式
很多时候，我们只需要从后台获取数据，然后将数据放在对应页面中，那么就会存在循环、判断等情况，但是通过前面的直接进入数据是不行的，所以我们就有了Block表达式，对某些事情进行更深入的操作。
一般形式为：{{# blockdemo}}开始到{{/blockdemo}}结束。通过一些逻辑操作来进行block的定义与使用。 - handlebars的内置块表达式（Block helper）
- each block helper === 即循环，遍历出列表内容，用this来引用遍历的元素
<ul>
{{#each name}}
<li>{{this}}</li>
{{/each}}
</ul>
对应的json
{ name: ["html","css","javascript"]};
- if else block helper == 即if/else语句
使用{{#if}}、{{#else}} {{/if}}等进行渲染，如：
{{#if list}}
<ul id="list">
{{#each list}}
<li>{{this}}</li>
{{/each}}
</ul>
{{else}}
<p>{{error}}</p>
{{/if}}
var data = {
info:['HTML5','CSS3',"WebGL"],
"error":"数据取出错误"
}
- unless block helper== 与if相反使用即可，如：
{{#unless data}}
<ul id="list">
{{#each list}}
<li>{{this}}</li>
{{/each}}
</ul>
{{else}}
<p>{{error}}</p>
{{/unless}}
- with block helper == 会在编译的阶段的时候进行context传递和赋值,用with我们可以很简单的进入一个数据集合里面，查找对应的数据很方便，如：
<div class="entry">
<h1>{{title}}</h1>
{{#with author}}
<h2>By {{firstName}} {{lastName}}</h2>
{{/with}}
</div>
{
title: "My first post!",
author: {
firstName: "Charles",
lastName: "Jolley"
}
}
- handlebars自定义标签
handlebars的自定义标签可以使用在Handlebars模板的任何地方，必须使用Handlebars.registerHelper即注册helper，用一个简单的例子来讲解：
Handlebars.registerHelper('fullName', function(person) {
return person.firstName + " " + person.lastName;});
使用情景：
<div class="post">
<h1>By {{fullName author}}</h1>
<div class="body">{{body}}</div>
<h1>Comments</h1>
{{#each comments}}
<h2>By {{fullName author}}</h2>
<div class="body">{{body}}</div>
{{/each}}
</div>
数据：
var context = {
author: {
firstName: "Alan",
lastName: "Johnson"},
body: "I Love Handlebars",
comments: [{
author: {
firstName: "Yehuda",
lastName: "Katz"},
body: "Me too!"
}
]};
结果：
<div class="post">
<h1>By Alan Johnson</h1>
<div class="body">I Love Handlebars</div>
<h1>Comments</h1>
<h2>By Yehuda Katz</h2>
<div class="body">Me Too!</div>
</div>
注：在自定义标签的helper中可以使用this，this是当前的对象。
- handlebars访问路径（Path）
handlebars支持路径，可以使用嵌套的路径，能够查找嵌套低于当前上下文的属性：
. 访问属性
../ 访问父属性
如：
{
title: "My First Blog Post!",
author: {
id: 47,
name: "Yehuda Katz"
},
body: "My first post. Wheeeee!"
};
访问情况
<h1>{{author.id}}</h1>
{{#with author}}
<h1>{{../title}}</h1>
{{/with}}
- 其他注意点
- {{}}与{{{}}}，{{}}会将所有的内容解析并转义，{{{}}}不会对html内容进行操作，这样我们需要的html就可以保全，但是必须保证html中无""（改成 ' '）,还有不能有换行等，这样会报错
- 还有与volicity有一个冲突的过程，需要注意。
这就是我要说的详细内容，缺少请指正，以便及时更新，及时补充。
网友评论