Backbone Live Collection End Point Fetch - cid overwrite
by FiNGAHOLiC
HTML
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<h1> Cat Tweets: </h1>
<div id="example_content"></div>
JavaScript
// A container for a tweet object.
var Tweet = Backbone.Model.extend({
initialize: function(attributes, options) {
this.cid = this.id;
}
});
// A basic view rendering a single tweet
var TweetView = Backbone.View.extend({
tagName: "li",
className: "tweet",
render: function() {
// just render the tweet text as the content of this element.
$(this.el).html(this.model.id + ": " + this.model.get("text"));
return this;
}
});
// A collection holding many tweet objects.
// also responsible for performing the
// search that fetches them.
var Tweets = Backbone.Collection.extend({
model: Tweet,
initialize: function(models, options) {
this.query = options.query;
},
url: function() {
return "http://search.twitter.com/search.json?q=" + this.query + "&callback=?";
},
parse: function(data) {
// note that the original result contains tweets inside of a results array, not at
// the root of the response.
return data.results;
}
});
// A rendering of a collection of tweets.
var TweetsView = Backbone.View.extend({
tagName: "ul",
className: "tweets",
initialize: function(options) {
// Bind on initialization rather than rendering. This might seem
// counter-intuitive because we are effectively "rendering" this
// view by creating other views. The reason we are doing this here
// is because we only want to bind to "add" once, but effectively we should
// be able to call render multiple times without subscribing to "add" more
// than once.
this.collection.bind("add", function(model) {
var tweetView = new TweetView({
model: model
});
$(this.el).prepend(tweetView.render().el);
}, this);
},
render: function() {
return this;
}
});
// Create a new cat tweet collection
var catTweets = new Tweets([], {
query:...