JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.4.min.js"></script>
<div id="#container"></div>
<script type="text/x-handlebars" data-template-name="myview">
<pre>{{#each rows}}{{#if value}}<span>{{columnFill}}</span><span {{bindAttr class="color"}}>{{value}}</span>{{/if}}
{{/each}}
</pre> <!-- pre on newline is important -->
</script>
CSS
.blue {
color: blue;
}
.red {
color: red;
}
pre {
min-width: 10em;
background: #eee;
border: 1px solid #ccc;
}
JavaScript
// create ember app around #container
window.App = Ember.Application.create({
rootElement: '#container'
});
// one of these objects per row
App.Row = Ember.Object.extend({
value: null,
color: null,
column: 0,
columnFill: function () {
var s = '';
var len = this.column;
while (s.length < len) s += ' ';
return s;
}.property('column')
});
// bunch of rows
App.rows = Ember.ArrayProxy.create({
content: [],
init: function () {
this._super();
// one row object per row
for (var i = 0; i < 10; i++) {
this.pushObject(App.Row.create());
}
},
setRow: function (row, column, color, value) {
var rowObj = this.content[row];
Ember.beginPropertyChanges();
rowObj.set('column', column);
rowObj.set('color', color);
rowObj.set('value', value);
Ember.endPropertyChanges();
}
});
App.MyView = Ember.View.extend({
templateName: 'myview',
rows: null
});
$(function() {
// create myview and pass in rows to work on
App.myView = App.MyView.create({rows: App.rows});
// append to container
App.myView.append();
// timeout some changes to the rows
setTimeout(function () {
App.rows.setRow(1, 13, 'blue', 'Hello!');
}, 1000);
setTimeout(function () {
App.rows.setRow(5, 10, 'red', 'What is your quests?');
}, 2000);
var mover = 5;
setInterval(function () {
if (mover > 35) mover = 5;
var bird;
if (mover % 2 === 0) {
bird = '^v^';
} else {
bird = '-v-'
}
App.rows.setRow(7, mover++, 'blue', bird);
}, 100);
});