bicherele/backbone.twitter.js

## readme.md

      
    Raw
  

              readme.md
            
          
    Backbone.js - Twitter helper

Backbone.js helper for Twitter requests
Install

Using Bower:
bower install backbone.twitter


## backbone.twitter.js
if(typeof APP == "undefined"){
	var APP = {
			Models: {},
			Collections: {},
			Views: {}
		};
}
	APP.Models.Twitter = {};

	APP.Models.Twitter.Tweet = Backbone.Model.extend({
		defaults: {

		}

	});


	APP.Collections.Twitter = {};

	APP.Collections.Twitter.Hash = Backbone.Collection.extend({
		model: APP.Models.Twitter.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.Twitter.User = Backbone.Collection.extend({
		model: APP.Models.Twitter.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.Twitter.Stream = 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 );
		}

	});

/*
Usage:
$(document).ready( function() {

	var data = new APP.Collections.Twitter.User({user:"tracend", num: 15});
	var view = new APP.Views.Twitter.Stream({el: "#twitterfeed", model: data});

	var data1 = new APP.Collections.Twitter.Hash({query:"%23AlphasOnSyfy", num: 15});
	var view1 = new APP.Views.Twitter.Stream({el: "#twitterhash", model: data1});

});
*/

## component.json
{
  "name": "Backbone Twitter",
  "version": "0.2.0",
  "main": ["./backbone.twitter.js"],
  "dependencies": { "backbone", "underscore", "backbone.app" }
}

## 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>
	if(typeof APP == "undefined"){
	var APP = {
	Models: {},
	Collections: {},
	Views: {}
	};
	}
	APP.Models.Twitter = {};

	APP.Models.Twitter.Tweet = Backbone.Model.extend({
	defaults: {

	}

	});


	APP.Collections.Twitter = {};

	APP.Collections.Twitter.Hash = Backbone.Collection.extend({
	model: APP.Models.Twitter.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.Twitter.User = Backbone.Collection.extend({
	model: APP.Models.Twitter.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.Twitter.Stream = 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 );
	}

	});

	/*
	Usage:
	$(document).ready( function() {

	var data = new APP.Collections.Twitter.User({user:"tracend", num: 15});
	var view = new APP.Views.Twitter.Stream({el: "#twitterfeed", model: data});

	var data1 = new APP.Collections.Twitter.Hash({query:"%23AlphasOnSyfy", num: 15});
	var view1 = new APP.Views.Twitter.Stream({el: "#twitterhash", model: data1});

	});
	*/
	{
	"name": "Backbone Twitter",
	"version": "0.2.0",
	"main": ["./backbone.twitter.js"],
	"dependencies": { "backbone", "underscore", "backbone.app" }
	}
	<!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>