Skip to content

Instantly share code, notes, and snippets.

@ryndel

ryndel/backbone.twitter.js

Created October 14, 2012 01:09
Show Gist options
  • Save ryndel/3886851 to your computer and use it in GitHub Desktop.
Save ryndel/3886851 to your computer and use it in GitHub Desktop.
Download ZIP
Backbone.js - Twitter model / view
Raw
backbone.twitter.js
var APP = {
Models: {},
Collections: {},
Views: {}
};
APP.Models.Tweet = Backbone.Model.extend({
defaults: {
}
});
APP.Models.Highlight = APP.Models.Tweet.extend({
defaults: {
}
});
APP.Collections.Highlights = APP.Collections.TwitterUser.extend({});
APP.Collections.TwitterHash = Backbone.Collection.extend({
model: APP.Models.Tweet,
url: function(){ return "http://search.twitter.com/search.json?q="+this.query+"&rpp="+this.num },
initialize: function(options){
this.query=options.query;
this.num=options.num;
this.fetch();
},
parse: function( data ){
return data.results;
},
sync: function(method, model, options){
//options.timeout = 10000;
options.dataType = "jsonp";
return Backbone.sync(method, model, options);
}
});
APP.Collections.TwitterUser = Backbone.Collection.extend({
model: APP.Models.Tweet,
url: function(){ return "http://twitter.com/status/user_timeline/" + this.user + ".json?count="+this.num },
initialize: function(options){
this.user=options.user;
this.num=options.num;
this.fetch();
},
parse: function( data ){
return data;
},
sync: function(method, model, options){
//options.timeout = 10000;
options.dataType = "jsonp";
return Backbone.sync(method, model, options);
}
});
APP.Views.Module = Backbone.View.extend({
initialize: function(options){
_.bindAll(this, 'render');
this.model.bind("change", this.render);
this.model.bind("reset", this.render);
this.template = Handlebars.compile( $(this.el).find("#twitter-hash").html() );
},
render: function(){
var html = this.template({ items: this.model.toJSON() });
$(this.el).html( html );
}
});
$(document).ready( function() {
var data = new APP.Collections.TwitterUser({user:"tracend", num: 15});
var view = new APP.Views.Module({el: "#twitterfeed", model: data});
var data1 = new APP.Collections.TwitterHash({query:"%23AlphasOnSyfy", num: 15});
var view1 = new APP.Views.Module({el: "#twitterhash", model: data1});
});
Raw
demo.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Twitter Handlebars</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
</head>
<body>
<div id="twitterfeed">
<script id="twitter-hash" type="text/x-handlebars-template">
{{#items}}
<p><img src="{{profile_image_url}}" alt="{{from_user_name}}"><strong>{{from_user_name}}</strong>{{linkify text}}<span class='date'> {{prettyDate created_at}}</span></p>
{{/items}}
</script>
</div>
<div id="twitterhash">
<script id="twitter-hash" type="text/x-handlebars-template">
{{#items}}
<p><img src="{{profile_image_url}}" alt="{{from_user_name}}"><strong>{{from_user_name}}</strong>{{linkify text}}<span class='date'> {{prettyDate created_at}}</span></p>
{{/items}}
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment