How to flash changed values in Ember.js?
HTML
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.4.js"></script>
<script type="text/x-handlebars" data-template-name="quotes-template">
<table class="quote-table">
<thead>
<tr>
<th class="quote-name">Name</th>
<th class="quote-code">Code</th>
<th class="quote-value">Value</th>
<th class="quote-bid">Bid</th>
<th class="quote-offer">Offer</th>
</tr>
</thead>
<tbody>
{{#each Quotes.quotesController.content}}
{{#view Quotes.itemRowView contentBinding="this"}}
<td class="quote-name">{{content.name}}</a>
<td class="quote-code">{{content.code}}</a>
<td class="quote-value">{{content.value}}</a>
<td class="quote-bid">{{content.bid}}</a>
<td class="quote-offer">{{content.offer}}</a>
{{/view}}
{{/each}}
</tbody>
</table>
</script>
<div id="container"></div>
CSS
.quote-table {
border-spacing: 0;
}
.quote-table tr th,
.quote-table tr td {
padding: 2px;
}
.quote-table tr th {
background: #CCC;
text-align: left;
width: 120px;
}
.quote-table tr .quote-value,
.quote-table tr .quote-bid,
.quote-table tr .quote-offer {
text-align: right;
width: 60px;
}
.quote-table tr:nth-child(even) td {
background: #EEE;
}
JavaScript
window.Quotes = Ember.Application.create();
Quotes.quotesController = Ember.ArrayController.create({
content: [],
processChange: function(hash) {
var existingQuotes = this.filterProperty('code', hash.code);
if (existingQuotes.length > 0) {
existingQuotes[0].setProperties(hash);
}
else {
var quote = Ember.Object.create(hash);
this.pushObject(quote);
}
}
});
Quotes.itemRowView = Ember.View.extend({
tagName: 'tr',
valueDidChange: function() {
// only run if updating a value already in the DOM
if(this.get('state') === 'inDOM') {
// only update the value element to the color red
Ember.$(this.get('element')).find('.quote-value').css('color','red');
}
}.observes('content.value')
});
Quotes.view = Ember.View.create({
templateName: 'quotes-template'
});
Quotes.view.appendTo('#container');
Quotes.quotesController.processChange({
"name": "Apple",
"code": "AAPL",
"value": 111 ,
"bid": 112,
"offer": 110
});
Quotes.quotesController.processChange({
"name": "Microsoft",
"code": "MSFT",
"value": 78 ,
"bid": 70,
"offer": 75
});
setInterval(function() {
Quotes.quotesController.processChange({
"code": "AAPL",
"value": 119 ,
"bid": 120,
"offer": 118
});
}, 3*1000);