Skip to content

Instantly share code, notes, and snippets.

@tomdale
Forked from tdreyno/example.html
Created December 27, 2011 18:16
Show Gist options
  • Save tomdale/1524669 to your computer and use it in GitHub Desktop.
Save tomdale/1524669 to your computer and use it in GitHub Desktop.
Live collection example in Ember
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Collection Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Updated template to use #each, which should be easier to understand -->
<script type="text/x-handlebars">
<ul class="tweets">
{{#each Twitter.searchResults}}
<li class="tweet">{{text}}</li>
{{/each}}
</ul>
</script>
<script src="js/libs/jquery-1.6.1.min.js"></script>
<script src="js/libs/ember-0.9.2.js"></script>
<script>
// Namespace
Twitter = Em.Application.create({
ready: function() {
// Polling
setInterval(function() {
Twitter.searchResults.refresh();
}, 2000);
Twitter.searchResults.set("query", "cats");
//
// Need to call _super() so event delegation is setup.
//
this._super();
}
});
// Model
Twitter.Tweet = Em.Object.extend();
// Collection
// Changed ArrayProxy to ArrayController which IMO is a friendlier name.
Twitter.searchResults = Em.ArrayController.create({
content: [],
query: null,
_idCache: {},
addTweet: function(tweet) {
var id = tweet.get("id");
if (typeof this._idCache[id] === "undefined") {
this.pushObject(tweet);
this._idCache[id] = tweet.id;
}
},
refresh: function() {
var query = this.get("query");
if (Em.empty(query)) {
this.set("content", []);
return;
}
var self = this;
$.getJSON("http://search.twitter.com/search.json?q=" + query + "&callback=?", function(data) {
for (var i = 0; i < data.results.length; i++) {
self.addTweet(Twitter.Tweet.create(data.results[i]));
}
});
}.observes("query")
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment