JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
<script src="http://builds.emberjs.com/tags/v1.2.0/ember.min.js"></script>
<script type="text/x-handlebars">
  simple mailto link:                <br />
  {{mailTo emailAddress}}            <br />
                                     <br />
  mailto link with alternate label   <br />
  {{mailTo emailAddress username}}   <br />
    
  <!-- -------------------------------- -->
                                     <hr />  
  {{#if changed}}   
     Model just changed, click "Run" to reset
  {{else}}
     Changing model in a few
  {{/if}}
</script>

JavaScript

Em.Handlebars.registerBoundHelper('mailTo', function (emailAddress, label) {
    emailAddress = Em.Handlebars.Utils.escapeExpression(emailAddress);
    label = (arguments.length == 2) ? emailAddress : Em.Handlebars.Utils.escapeExpression(label);

    var link = '<a href="mailto:' + emailAddress + '">' + label + '</a>';
    return new Em.Handlebars.SafeString(link);
});


var App = Ember.Application.create();
App.ApplicationController = Ember.Controller.extend({
    changed: false,
    username: 'FooBar',
    emailAddress: 'foobar@example.com',

    init: function () {
        Ember.run.later(this, function () {
            this.set('emailAddress', 'foo@bar.com');
            this.set('username', 'BarFoo');
            this.set('changed', true);
        }, 3000);
    }
});


App.Router = Ember.Router.extend({
    enableLogging: true,
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/'
        })
    })
});