在一个教程中,我看到他们使用 JSON 从 twitter 获取信息,然后粘贴到模板(Handlebars)中。我对 JSON 和从服务器获取信息的这个概念真的很陌生,但最让我困惑的是 $.JSON 和 $map 中的匿名函数是它们使用回调函数并传递一些参数。我不明白它们来自哪里以及为什么要引用它们。如果有人能给我一个线索,那就太好了。谢谢
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Twiiter API</title>
</head>
<body>
<ul class="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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script>
(function(){
var Twitter = {
init: function(config){
this.url = 'http://search.twitter.com/search.json?q=' + config.query + '&callback=?';
this.template = config.template;
this.container = config.container;
this.fetch();
},
attachTemplate : function(){
var template = Handlebars.compile(this.template);
this.container.append(template (this.tweets));
},
fetch: function(){
var self = this; // This REFERS TO TWITTER OBJECT
$.getJSON(this.url, function (data){
//$.map WILL FILTER THROUGH AN ARRAY AND FOR EACH ONE OF THOES IT WILL EXECUTE A FUNCTION
self.tweets = $.map(data.results, function(tweet){
return {
author : tweet.from_user,
tweet : tweet.text,
thumb: tweet.profile_image_url,
url: 'http://twitter.com/' + tweet.form_user + '/status/' + tweet.id_str
};
});
self.attachTemplate();
});
}
};
Twitter.init({
template:$('#tweets-template').html(),
container:$('ul.tweets'),
query: 'tutspremium'
});
})();
</script>
</body>
</html>