JSFiddle - React, Tailwind, and code Playground

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}}
</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>

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/',
            type:"post",
            data: {
                json: JSON.stringify({'newObject': {'name':'new object one'}}),
                delay: 4
            },
            success: function(data){
                console.log("REquest successful ", data);
                self.trigger('responseSuccess');
            }
        })
    }
})
App.MyListController = Em.Controller.extend(Em.Evented, {
    clickedOnLink: function(){
        console.log("clicked on link");
        App.serverAPI.request();
    },
    handleResponse: function(){
        console.log('this.handleResponse');
    }
})
App.MyListView = Em.View.extend({
    templateName: 'myList',
    didInsertElement: function(){
        this.get('controller').on('responseSuccess', this.handleResponse)
    }
});