Ember JSignature Components

components.jsignature-ember.js

import Ember from 'ember';

export default Ember.Component.extend({

  format: null,
  
  didInsertElement: function () {

    this._super(...arguments);

    jQuery('#' + this.get('elementId') + ' > #signature').jSignature();
        
	 },
  
  // clean up to prevent memory leaks
  willDestroyElement: function () {
    
    this._super(...arguments);
        
  },
  
  actions: {
    accept() {
      this.get('onAccept')(jQuery('#' + this.get('elementId') + ' > #signature').jSignature('getData', this.get('format')));

    },
    clear() {
      jQuery('#' + this.get('elementId') + ' > #signature').jSignature('clear');
    }
  }
  
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember JSignature Demo',
  mySignature: null,
  
  actions: {
    onAccept: function(signature) {
      this.set('mySignature', signature);
    }
  }
  
});

templates.application.hbs

<h1>Ember JSignature Demo</h1>
<div class="panel panel-default">
	<div class="panel-heading">Component</div>
  <div class="panel-body">
		{{jsignature-ember
    	format='svg'
    	onAccept=(action 'onAccept')
    }}
	</div> 
</div>
<div class="panel panel-default">
	<div class="panel-heading">Controller</div>
  <div class="panel-body">
  	{{textarea value=mySignature rows=10 cols=80}}
  </div>
</div>

templates.components.jsignature-ember.hbs

<div id='signature'></div>
<button {{action 'accept'}}>Accept</button> <button {{action 'clear'}}>Clear</button>

{{yield}}

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js",
    "ember": "2.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2",
    "bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
    "bootstrap-js": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",
    "jsignature": "https://rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"
  },
  "addons": {}
}