JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="single">
Single view: {
{
view.number
}
}
</script>
<script type="text/x-handlebars" data-template-name="reverse">
< a {
{
action reverseContent
}
} > Reverse < /a>
</script>
JavaScript
App = Em.Application.create({});
App.controller = Em.ArrayController.create({
reversed: false,
content: [],
init: function () {
var content = this.get('content');
function addContent() {
if (content.get('length') < 10) {
content.pushObject(content.get('length'));
setTimeout(addContent, 1000);
console.log(content);
}
}
addContent();
return this._super();
},
sortedContent: function () {
var content = this.get('content'),
reversed = this.get('reversed');
if (reversed) {
return content;
} else {
return content.slice(0).reverse();
}
}.property('content.@each', 'reversed')
});
App.TestView = Em.View.extend({
templateName: 'single',
numberBinding: 'content'
})
Em.View.create({
templateName: 'reverse',
controller: App.controller,
reversedBinding: 'controller.reversed',
reverseContent: function () {
this.toggleProperty('reversed');
}
}).append();
Em.CollectionView.create({
tagName: 'div',
controller: App.controller,
contentBinding: 'controller.sortedContent',
itemViewClass: 'App.TestView'
}).append();