我在这里读了几个例子但是我仍然有点卡住了。 我从一个像这样格式化的api中获取一个feed
{
total:123,
id: "1234",
results: [
{
id: "1234",
name: "bobs market",
phone: "123-456-7890",
othervalue: "33333333",
onemore: "get this"
},
{
id: "1235",
name: "jans market",
phone: "123-456-7899",
othervalue: "33333353",
onemore: "get this one"
}
]
}
我正在尝试使用$ .getJSON功能循环遍历每条记录,并在ID为#bizresults的div中显示每个业务,因此生成的html看起来像这样
<div id="business">
<h4><a href=#>Business Name</a></h4>
<p id="phone">555-555-5555</p>
<p id="adr">
<span id="street-address">12 Main Street</span>
<span id="locality">Sacramento</span>
<span id="region">CA</span>
</div>
我似乎在脚本中得到结果我可以在Chrome开发控制台中看到它们但是我似乎无法将输出输出到我的div。
接受我的建议@ Handlebars.js ** 我仍然不在那里 -
<script id="biz_template" type="text/x-handlebars-template">
<div id="businesses">
{{#each jsonResult}}
<a href=#><h4>{{name}}</a></h4>
<p id="phone">{{phone}}</p>
<p id="adr">
<span id="street-address">{{address}}</span>
<span id="locality">{{city}}</span>
<span id="region">{{state}}</span>
</p>
{{/each}}
</div>
</script>
<script>
var source = $("#biz_template").html();
var template = Handlebars.compile(source);
var data = '{"totalCount":61,"impId":"17","jsonResult":[{"impId":"17","listingId":"94523","pageUrl":"/page/LA/new-orleans/ccs-coffee-house/17-94523.html","name":"CC's Coffee House","phone":"(504) 586-0278","address":"650 Poydras St","city":"New Orleans","state":"LA","latitude":"29.949339","longitude":"-90.070017"},{"impId":"17","listingId":"417428","pageUrl":"/page/LA/metairie/ccs-community-coffee-house/17-417428.html","name":"CC's Community Coffee House","phone":"(504) 831-1449","address":"701 Metairie Rd","city":"Metairie","state":"LA","latitude":"29.98763","longitude":"-90.130528"},{"impId":"17","listingId":"228835","pageUrl":"/page/LA/new-orleans/ccs-community-coffee-house/17-228835.html","name":"Cc's Community Coffee House","phone":"(504) 566-1863","address":"228 St Charles Av","city":"New Orleans","state":"LA","latitude":"29.951952","longitude":"-90.069885"}]}';
$("#biz").html(template(data));
</script>
有什么想法吗?
我在HTML
中有div的id答案 0 :(得分:1)
这里的任务是在getJSON成功函数中建立标记。您可以通过连接字符串或使用模板系统(如把手,JsRender,下划线等)来实现。如果您正在寻找双向绑定,请查看Angular或Knockout。
答案 1 :(得分:1)
我刚刚使用$.getJSON
和把手做了一个插件,这只是其中的一部分,基本上只需要你。如果你愿意,我可以发布整个插件。
别忘了将文件或网址引用到把手
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js" type="text/javascript"></script>
var container = $('#tweets'),
template: $('#tweets-template').html()
$.getJSON(this.url, function(data) {
var tweets = $.map(data.results, function(tweet) {
return {
author: tweet.from_user,
tweet: tweet.text,
thumb: tweet.profile_image_url,
url: 'http://twitter.com/' + tweet.from_user + '/status/' + tweet.id_str
};
});
var templateHandlebars = Handlebars.compile(template);
container.append(templateHandlebars(tweets));
});
//this is the html and the template
<ul id="tweets">
<script id="tweets-template" type="text/x-handlebars-template">
{{#each this}}
<li>
<img src={{thumb}} alt={{author}} />
<p><a href={{url}}>{{tweet}}</a></p>
</li>
{{/each}}
</script>
</ul>