第一回接触handlebars ，结合别人的json写个例子
日期：2014-05-16 浏览次数：20356 次
第一次接触handlebars ，结合别人的json写个例子
期间遇到跨域问题，使用jsonp解决。
<!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解决。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
