<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<title>handlebars-食谱测试</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/handlebars.js"></script>
</head>
<body>
<div id="rest">
</div>
<script id="Handlebars-Template" type="text/x-handlebars-template">
<div id="Content">
<h1>ΞRecipeCards
<span id='BOS'>Recipe search powered by
<a id='Logo' href='http://www.yummly.com/recipes'>
<img src='http://static.yummly.com/api-logo.png'/>
</a>
</span>
</h1>
{{#each Recipes}}
<div class='Box'>
<img class='Thumb' src="{{{smallImageUrls}}}" alt="{{recipeName}}">
<h3>{{recipeName}} <a id='Logo' href="{{Source.Url}}"> - {{{smallImageUrls}}}</a></h3>
<h5>{{getFlavor Flavors}}</h5>
<h5>{{sourceDisplayName}}</h5>
<p>Ingredients:</p>
<ul>
{{#each ingredients}}
<li>{{this}}</li>
{{/each}}
</ul>
</div>
{{/each}}
</div>
</script>
<script type="text/javascript">
$(function(){
var result = null;
$.ajax({
async: false,
url: "http://api.yummly.com/v1/api/recipes?_app_id=fd47c664&_app_key=99aa6ecb68f1243a79614c84b1834814&images=large",
//url:"http://localhost:8080/mininet/static/didi/wap/test.json",
//dataType: 'json'
dataType:"jsonp",
jsonpCallback:"callback",
})
//如果用平时的ajax方式，会有跨域问题，解决用jsonp
/**.done(function ( rtn ) {
if (typeof (rtn) === 'object') {
result = rtn;
} else {
result = jQuery.parseJSON(rtn)
}
var source = $("#Content").html();
var Source = $("#Handlebars-Template").html();
//Compile the actual Template file
var Template = Handlebars.compile(Source); //Generate some HTML code from the compiled Template
var HTML = Template({ Recipes : result.matches });
$("#rest").html(HTML)
});**/
});
//json请求回调函数（jsonp 解决跨域问题）
function callback(rtn) {
if (typeof (rtn) === 'object') {
result = rtn;
} else {
result = jQuery.parseJSON(rtn)
}
var Source = $("#Handlebars-Template").html();
var Template = Handlebars.compile(Source); //Generate some HTML code from the compiled Template
var HTML = Template({ Recipes : result.matches });
$("#rest").html(HTML)
}
//自定义helpers
Handlebars
.registerHelper("getFlavor",
function(FlavorsArr){
var H = 0;
var Name = '';
for(var F in FlavorsArr)
{
if(FlavorsArr[F] > H)
{
H = FlavorsArr[F];
Name = F;
}
}
return "This Dish has a " + Name + " Flavor";
});
</script>
</body>
</html>
期间遇到跨域问题，使用jsonp解决。
分享到：
相关推荐
在本文中，我们将深入探讨Handlebars的核心概念、语法特性以及如何使用官方提供的例子和源代码来提升开发效率。 一、Handlebars概述 Handlebars设计的目标是提供一种易于理解和使用的模板语言，同时保持与HTML的...
"Handlebars 入门教程" Handlebars 是一个流行的模板引擎，用于将数据渲染到 HTML 模板中。它提供了一个简单易用的语法，允许...Handlebars 提供了一个 jQuery 插件，以便将 Handlebars 集成到 jQuery 中。这个插
**前端开源库-promised-handlebars** 是一个专为前端开发者设计的开源库，它扩展了经典的 Handlebars 模板引擎，引入了对 Promise 的支持。Handlebars 本身是一种声明式模板语言，常用于生成 HTML 或其他结构化文本...
在这个例子中，我们改变了Handlebars的定界符为 `{% %}`，并编译了一个简单的条件模板。这样，即使模板中包含原生的 `{{ }}`，也不会与Handlebars的语法产生冲突。 除了基本的替换定界符功能，`handlebars-...
在传统的Handlebars语法中，虽然可以使用内置的#each助手来遍历数组或对象，但如果你需要一个简单的数字迭代（例如，重复某段文字5次），handlebars-helper-repeat就派上用场了。 使用handlebars-helper-repeat，你...
- **上下文（Context）**: 上下文是模板中数据的来源，通常是一个JavaScript对象或数组。 - **部分（Partials）**: 部分是可重用的模板片段，可以在多个位置插入。 2. **Handlebars与PHP结合**： - PHP可以用来...
JSON格式基于JavaScript的一个子集，但它是独立于语言的，具有良好的可读性和效率。 在前端开发中，JSON经常与JQuery库结合使用，JQuery提供了方便的方法来处理JSON数据，如$.getJSON、$.ajax等，使得数据的获取和...
例如，你可以将一个Java对象通过`Gson().toJson()`方法转化为JSON字符串，反之则可以通过`Gson().fromJson()`解析JSON字符串为Java对象。 2. **Jackson库**：Jackson是另一个流行的Java JSON库，提供了更强大的功能...
例如，可以创建一个`_header.hbs`来包含头部信息，然后在多个模板中引用它： ``` {{> _header}} ``` 五、Handlebars预编译 为了提高性能，Handlebars提供预编译功能，可以将模板编译成JavaScript函数，然后在运行时...
Handlebars.java 是一个不包含逻辑的，语义的 Java 模板引擎。 Maven: <groupId>com.github.jknack</groupId> <artifactId>handlebars ${handlebars-version} 示例代码： Handlebars handlebars = ...
Handlebars提供了一个简单的双大括号语法`{{ }}`，用于插入变量和表达式。例如，`{{ name }}`可以用来显示一个名为`name`的变量值。此外，它还支持条件语句（如`{{#if}}`和`{{else}}`）、循环（如`{{#each}}`）以及...
【前端开源库-yeoman-handlebars-engine】是一个用于前端开发的开源工具，它结合了Yeoman生成器和Handlebars模板引擎。Yeoman是构建现代Web应用程序的自动化工具，它可以帮助开发者快速搭建项目结构，自动执行常见...
在这个例子中，`type`表示元素类型，`content`是文本内容，`styles`包含了样式信息，而`images`数组则包含了图片的相关数据。 将JSON对象与富文本编辑器关联起来，需要在前端实现将JSON解析为可编辑的HTML，而在...
总结起来，这个项目是一个基于SSH的Web应用，利用JSP进行页面展示，同时结合jQuery的异步加载功能来优化用户体验。服务器端通过Java处理HTTP请求，返回JSON数据，客户端则使用这些数据动态更新页面内容。这样的设计...
handlebars.js
1. **注册模板**：首先，你需要创建一个模板字符串，然后使用`Handlebars.compile()`方法将其编译成一个函数。 ```javascript var templateString = "<p>{{name}}</p>"; var template = Handlebars.compile...
综合以上信息，我们可以推测这是一个使用Handlebars和Humanize来增强Java SE应用的开源项目，其中"chicory"可能是一个包含各种助手函数的库，目的是帮助开发者更方便地处理数据展示和格式化，特别是在前端界面中。...
handlebars-v3.0.0.js
本篇文章将深入探讨“前端开源库-nodemailer-express-handlebars”，它是一个结合了nodemailer、Express和Handlebars的插件，专门用于生成和发送电子邮件。 首先，我们来了解nodemailer。nodemailer是Node.js中的一...
Handlebars.js 是一个流行的JavaScript模板引擎，用于生成...总的来说，Handlebars.js v4.0.5是一个强大的工具，用于构建动态和响应式的用户界面。通过熟练掌握它的特性，开发者能够编写出更高效、更易维护的前端代码。