JSFiddle - React, Tailwind, and code Playground

by Abdull

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.3.min.js"></script>
<script type="text/x-handlebars">
    <button {{action "changePersoon" }}>Set Person</button>
    <button {{action "modifyFirst" }}>Modify first person</button>
</script>

JavaScript

App = Em.Application.create();

App.ApplicationController = Ember.Controller.extend({
    changePersoon: function() {
      App.person.addProperty();
    },
    
    modifyFirst: function()  {
     App.person.changeProperty();  
    }
    
    
});

App.Person = Ember.Object.extend({
    person: Ember.A(),
    perzo: function() {
        // do something here when the person changes
        alert("PERSON CHANGED");
    }.observes('person.[]'),
    
    fuxxo: function() {
       alert("lolzza");
    }.observes("person.@each"),
                              
    addProperty: function () {
        this.person.pushObject(3);
        //this.person.push(3);
    },
    
    changeProperty: function() {
        this.get("person").replace(0, 1, new String("ggg"));
        //person[0] = "doesn't work";
    }
});

App.person = App.Person.create();