Skip to content

Instantly share code, notes, and snippets.

@bmelton
Created April 9, 2012 01:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bmelton/2340717 to your computer and use it in GitHub Desktop.
Save bmelton/2340717 to your computer and use it in GitHub Desktop.
A Gentle Introduction to Ember - Adding a textbox
<!doctype html>
<head>
<title>Ember test</title>
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="../lib/ember.min.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<img {{bindAttr src="Example.logo"}} alt="Logo"><br />
<h1>{{ Example.name }}</h1>
{{view Example.ChangeQuery id="new-todo" placeholder="#EmberJS"}}
{{#view Example.LoopingView id="looping-view" }}
{{#each Example.populate}}
<li>{{ from_user_name }} - {{ text }}!</li>
{{/each}}
{{/view }}
</script>
<script>
Example = Ember.Application.create({
name: "Example Application",
logo: "http://sympodial.com/images/logo.png",
searchString: "%23EmberJS",
ready: function() {
Example.populate.getTweets();
setInterval(function() {
Example.populate.getTweets();
}, 2000);
}.observes("name")
})
Example.Item = Ember.Object.extend();
var items = [
Example.Item.create({ name: "Barry" }),
Example.Item.create({ name: "Misty" }),
Example.Item.create({ name: "Derrick" })
]
Example.LoopingView = Ember.View.extend({
items: items
});
Example.ChangeQuery = Ember.TextField.extend({
insertNewline: function() {
var value = this.get('value');
console.log("Value: " + value);
Example.set("searchString", value);
Example.populate.getTweets();
}
});
Example.populate = Ember.ArrayController.create({
content: [],
idArray: {},
addItem: function(item) {
var id = item.id;
if(typeof this.idArray[id] == "undefined") {
if(item.iso_language_code == "en") {
this.pushObject(item);
this.idArray[id] = item.id;
Example.Item.create({ name: item.text });
}
};
},
getTweets: function() {
var self = this;
var searchString = Example.get("searchString");
var url = "http://search.twitter.com/search.json?callback=?&q=" + searchString;
$.getJSON(url, function(data) {
for (var i = 0; i < data.results.length; i++) {
self.addItem(Example.Item.create(data.results[i]));
};
})
}
});
</script>
</body>
</html>
@bmelton
Copy link
Author

bmelton commented Apr 9, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment