Ember.js v0.9.7.1
HTML
<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.7.1.js"></script>
<script type="text/x-handlebars" data-template-name="app-server">
<h1>Default</h1>
{{#each data.Servers}}
<div class="server">
<h1>{{unbound Name}}</h1>
Time: {{unbound CurrentTime}}<br />
</div>
{{/each}}
<hr />
</script>
JavaScript
App = Ember.Application.create({
//For some reason ready isn't working here, gives error.
});
$(document).ready(function() {
App.serverOverview.append();
checkTimer();
function checkTimer() {
App.service.getServers();
setTimeout(checkTimer, 1000);
}
});
App.service = Ember.Object.create({
data: {},
getServers: function() {
this.set('data', {
"Servers":[
{"Name":"USWest","CurrentTime": new Date().getTime().toString()},
{"Name":"USEast","CurrentTime": new Date().getTime().toString()}
]
});
}
});
App.serverOverview = Ember.View.create({
templateName: "app-server",
data: {},
update: function() {
this.set("data", App.service.data);
Ember.run.next(this, function() {
console.log('after update');
$(".server").css("color", "blue");
});
}.observes("App.service.data")
});