JSFiddle - React, Tailwind, and code Playground

by sperske

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.6.js"></script>
<script src="http://coderberry.me/assets/ZeroClipboard/ZeroClipboard.js"></script>
<script type="text/x-handlebars">
  <div class="container">
    {{em-clipboard text=message label="Copy"}}
  </div>
</script>

<script type="text/x-handlebars" id="components/em-clipboard">
  <div class="input-append">
    <span class="span4 uneditable-input">{{text}}</span>
    <button class="btn" {{bindAttr data-clipboard-text=text}} 
            title="Copy to clipboard">{{label}}</button>
  </div>
</script>

JavaScript

var App = Ember.Application.create();

App.ApplicationController = Ember.ObjectController.extend({
    message: 'This is the text that should be copied'
});

App.EmClipboardComponent = Ember.Component.extend({
    didInsertElement: function () {
        var clip = new ZeroClipboard(this.$('button'), {
            // This would normally be a relative path
            moviePath: "http://coderberry.me/assets/ZeroClipboard/ZeroClipboard.swf",

            // Added for demo on JSFiddle. See http://goo.gl/DLl7O
            trustedDomains: ["*"],
            allowScriptAccess: "always"
        });

        clip.on('complete', function (client, args) {
            alert('Copied "' + args.text + '" to clipboard');
        });
    }
});