Initialising 3rd-party components in Dough

component.html

<div data-dough-component="External" 
     data-dough-external-component="Taggle"
     data-dough-external-component-config='{"tags": ["Rye","Granary","Pumpernickel"], "tabIndex": 0}'
>
  <div data-dough-external-node="list"></div>
  <input data-dough-external-node="input" value="">
</div>

ExternalComponent.js

define('ExternalComponent', ['jquery', 'DoughBaseComponent'], function($, DoughBaseComponent){
  'use strict';

  var defaultConfig = {},

    /**
   * Call base constructor
   * @constructor
   */
  ExternalComponent = function($el, config) {
    ExternalComponent.baseConstructor.call(this, $el, config, defaultConfig);
    
    this.init();
  };

  DoughBaseComponent.extend(ExternalComponent);
  
  ExternalComponent.prototype.init = function() {
    // The loading of the external component's wrapper will need some thought
    // Some how we would need to pass the componentId into here or load it first. 
    this.instance = this.someMethodWhichRequiresAndInitsTheDependency(componentId, $el, config);
  };
  
  return ExternalComponent;
  
});

FastClick-wrapper.js

define('FastClickWrapper',['FastClick'], function(FastClick) {
    return function($el, config){
      FastClick.attach($el[0]);
      return FastClick; // Can return whatever we like here
    };
  }
});

Taggle-wrapper.js

define('TaggleWrapper',['Taggle'], function(Taggle) {
    return function($el, config){
      return new Taggle(config.els.$target, config.els.$trigger, {
        tags: config.libParams.tags,
        tabIndex: config.libParams.tabIndex
      });
    };
  }
});