JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars">
    <ul>
   {{#each App.aController}} 
    <li>{{id}} &mdash; {{computed}}</li>
    {{/each}}    
    </ul>
</script>

JavaScript

App = Ember.Application.create();

App.oController = Em.ArrayController.create({
    content: [],
    addO: function(O){
        this.pushObject(O);
    }    
});

App.aController = Em.ArrayController.create({
    content: [],
    addA: function(A){
        this.pushObject(A);
    }    
});

App.oModel = Em.Object.extend({
    id: null
});

var data = {
    id: null,
    computed: function(){
        var obj = App.oController.objectAt(this.get('id')), obj_id;
        if (typeof obj !== 'undefined') {
            obj_id = obj.get('id');
        } else {
            obj_id = 0;
        }
        return obj_id;        
    }.property('App.oController.@each')
}
App.aModel = Em.Object.extend(data);
    
App.oController.addO(App.oModel.create({id: 1}));
App.oController.addO(App.oModel.create({id: 2}));
App.oController.addO(App.oModel.create({id: 5}));

App.aController.addA(App.aModel.create({id: 3}));
App.aController.addA(App.aModel.create({id: 4}));

Ember.run.later(function(){
  App.oController.addO(App.oModel.create({id: 6}));
  App.oController.addO(App.oModel.create({id: 7}));            

}, 5000);