Simple SO answer
http://stackoverflow.com/questions/9703529/collecting-and-using-value-from-ember-textfield
HTML
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="https://github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars">
<div id="frm">
{{view Ember.TextField placeholder="Twitter username" valueBinding="App.tweetsController.username"}}
{{#view Ember.Button target="App.tweetsController" action="loadTweets"}}
Load Tweets
{{/view}}
</div>
<ul id="tweets">
{{#each App.tweetsController}}
{{#view App.TweetView contentBinding="this" classBinding="content.isRead"}}
<img src="{{unbound content.avatar}}" />
<span>{{content.date}}</span>
<h3>{{content.screen_name}}</h3>
<p>{{content.text}}</p>
{{/view}}
{{/each}}
</ul>
</script>
CSS
* {
font-family: 'tahoma', sans-serif;
}
body {
background: #eeeeee;
}
#frm {
margin: 0 auto 15px auto;
width: 450px;
text-align: center;
}
#tweets {
margin: 0 auto;
width: 450px;
border: 1px solid #999999;
padding: 0;
}
#tweets li {
margin: 0;
padding: 10px;
list-style: none;
border-bottom: 1px solid #999999;
border-right: 5px solid #6393c1;
min-height: 50px;
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #dddddd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#dddddd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#dddddd 100%); /* IE10+ */
background: linear-gradient(top, #eeeeee 0%,#dddddd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
}
#tweets li:hover, #tweets .is-read {
background: #cfe7fa; /* Old browsers */
background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfe7fa), color-stop(100%,#6393c1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cfe7fa 0%,#6393c1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cfe7fa 0%,#6393c1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cfe7fa 0%,#6393c1 100%); /* IE10+ */
background: linear-gradient(top, #cfe7fa 0%,#6393c1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */
}
#tweets li span...
JavaScript
App = window.App = Ember.Application.create();
/**************************
* Models
**************************/
App.Tweet = Ember.Object.extend({
avatar: null,
screen_name: null,
text: null,
date: null,
isRead: false
});
/**************************
* Views
**************************/
App.TweetView = Ember.View.extend({
tagName: 'li',
content: null,
click: function() {
this.setPath('content.isRead', true);
}
});
/**************************
* Controllers
**************************/
App.set('tweetsController', Ember.ArrayController.create({
content: Ember.A(),
username: null, // Since the content is dependant on the username it makes sense to have it in here imho
loadTweets: function() {
var ctr = this;
if(this.get('username')) {
var url = 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + this.get('username') + '&callback=?';
$.getJSON(url,function(data){
if (ctr.get('length')) ctr.removeAt(0, ctr.get('length'));
$(data).each(function(index,value){
var t = App.Tweet.create({
avatar: value.user.profile_image_url,
screen_name: value.user.screen_name,
text: value.text,
date: value.created_at
});
ctr.pushObject(t);
});
});
}
}
}));
/**************************
* App Logic
**************************/
$(function() {
});