JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a">start</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
<script src="http://builds.emberjs.com/tags/v1.13.10/ember.min.js"></script>

JavaScript

var emptyEmberObjectClass = Ember.Object.extend({});
var container = Ember.Object.extend({
  data: Ember.A([
    emptyEmberObjectClass.create({yo:1}),
    emptyEmberObjectClass.create({yo:2}),
    emptyEmberObjectClass.create({yo:3})
  ]),
  computedData: Ember.computed('[email protected]', function(){
      console.log('computedData');
    var sum = 0;
    this.get('data').forEach(function(data){
      sum += data.get('yo');
    });
    return sum;
  }),
  testObs: Ember.on('init', Ember.observer('computedData', function(){
    console.log('Test');
    Ember.$('#a').html('woohoO! cd: `' + this.get('computedData') + '`');
  }))
}).create();

var existingItem = container.get('data');
var target = existingItem.objectAt(0);
target.set('yo', 50);

target.set('yo', 100);