Ember Evented vs Observes

by amindunited

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>
        Application Header
    </h1>
    <hr/>
    {{render observer}}
    <hr/>
    {{render subscriber}}
    <hr/>
</script>
<script type="text/x-handlebars" data-template-name="observer">
    <h2>Observer</h2>
    {{view.displayText}}
</script>
<script type="text/x-handlebars" data-template-name="subscriber">
    <h2>SubScriber</h2>
    {{view.displayText}}
</script>

JavaScript

window.App = Em.Application.createWithMixins();
App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend();

//This is Object to hold the ajax request (and fire the event)
App.serverAPI = Em.Object.createWithMixins(Em.Evented, {
    responseData : '',
    init: function(){
        //Make the request on second from now
        Em.run.later(this, function(){
            this.request();
        }, 1000);
        this._super();
    },
    //The 'ajax' request function
    request: function(myData){
        var self = this;
        $.ajax({
            url:'/echo/json/',
            type: 'POST',
            data: {
                json: JSON.stringify({"0":"Value One", "1": "Value Two", "2": "Value Three"}),
                delay: 3
            },
            success: function(data){
                console.log("Request successful ", data);
                self.set('responseData', data);
                self.trigger('responseSuccess', data);
            }
        })
    }
});

//This View gets it's value updated by Observing a changed value in an other object 
App.Observer = Em.Object.extend({
    myCrazyNewProp: "Bollocks"
});
App.ObserverController = Em.Controller.extend();
App.ObserverView = Em.View.extend({
    templateName: "observer",
    displayText: "Observer waiting...",
    responseDataHandler: function(){
        //Notice how we have to get the data here, where in a listener the data could be passed
        var data = App.serverAPI.get('responseData');
        //
        //...Run functions on the data
        //
        this.set('displayText', data[0]+", "+data[1]+", "+data[2]);
        console.log('Observer displayText', this.get('displayText'));
    }.observes('App.serverAPI.responseData')
});


//This View gets it's value updated by subscribing to an event in an other object 
App.SubscriberView = Em.View.extend({
    templateName: "subscriber",
    displayText: "Subscriber waiting...",
    init: function(){
        var...