JSFiddle - React, Tailwind, and code Playground

by rlivsey

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars">
    <p>
        This component needs to know when something has finished happening
        as a result of one of its actions.
    </p>
    <p>
        Currently passing a deferred back when sending an action
        and relying on the receiver resolving it when done.
    </p>
    {{deferred-action onDoSomething="doSomething"}}    
</script>

<script type="text/x-handlebars" data-template-name="components/deferred-action">
    {{#if isWaiting}}
        Waiting...
    {{else}}
        <button {{action clicked}}>Click Me</button>    
    {{/if}}
</script>

JavaScript

App = Ember.Application.create({});

App.ApplicationRoute = Ember.Route.extend({
    actions: {
        doSomething: function(deferred) {
            // simulate doing something, ajax request etc...
            var promise = new Em.RSVP.Promise(function(resolve){
                Ember.run.later(function() {
                  resolve("data");
                }, 1000);
            });
            
            // tell the component when we're done
            promise.then(function(data){
              deferred.resolve(data);
            });
        }
    }
});

App.DeferredActionComponent = Ember.Component.extend({
    isWaiting: false,
    
    actions: {
        clicked: function() {
            this.set("isWaiting", true);
            var deferred = new Em.RSVP.defer();
            
            var self = this;
            deferred.promise.then(function() {
              self.set("isWaiting", false);
            });
            
            this.sendAction("onDoSomething", deferred);
        }
    }
});