Ember Evented

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>
    {{render myList}}
    {{render otherThing}}
</script>
<script type="text/x-handlebars" data-template-name="myList">
    <ul>
        <li><a {{action clickedOnLink this target=controller}}>Link One</a></li>
        <li><a {{action clickedOnLink this target=controller}}>Link Two</a></li>
        <li><a {{action clickedOnLink this target=controller}}>Link Three</a></li>
        <li><a {{action clickedOnLink this target=controller}}>Link Four</a></li>
        <li><a {{action clickedOnLink this target=controller}}>Link Five</a></li>
    </ul>
</script>
<script type="text/x-handlebars" data-template-name="otherThing">
    <h2>{{view.content.report}}</h2>
</script>

JavaScript

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

App.serverAPI = Em.Object.createWithMixins(Em.Evented, {
    request: function(myData){
        var self = this;
        $.ajax({
            url:'/echo/json',
            data: {
                json: {'newObject': {name:"new object one"}},
                delay: 1
            },
            success: function(data){
                console.log("REquest successful ", data);
                self.trigger('responseSuccess', data);
            }
        })
    }
});

App.MyList = Em.Object.create();
App.MyListController = Em.Controller.extend(Em.Evented, {
    clickedOnLink: function(){
        console.log("clicked on link");
        App.serverAPI.request();
    },
    handleResponse: function(data){
        console.log('this.handleResponse', data);
    }
})
App.MyListView = Em.View.extend({
    templateName: 'myList',
    didInsertElement: function(){
        App.serverAPI.on('responseSuccess', this.get('controller').handleResponse)
    }
});

App.OtherThing = Em.Object.create()
App.OtherThingController = Em.Controller.extend(Em.Evented,{
    otherHandleResponse: function(data){
        console.log("Other got it too!", data);
    }
})
App.OtherThingView = Em.View.extend({
    templateName: 'otherThing',
    didInsertElement: function(){
        App.serverAPI.on('responseSuccess', this.get('controller').otherHandleResponse)
    }
})