RequireJS + jQuery UI Plugin

<!DOCTYPE html>
<html>

  <head>
    <link data-require="jqueryui@1.10.0" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script data-main="main" data-require="require.js@2.1.4" data-semver="2.1.4" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.4/require.js"></script>
    <!--
    <script data-require="require-jquery@0.25.0" data-semver="0.25.0" src="//cdnjs.cloudflare.com/ajax/libs/require-jquery/0.25.0/require-jquery.js"></script>
    <script data-require="require-text@2.0.3" data-semver="2.0.3" src="//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.3/text.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="jqueryui@1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    
    <script data-require="knockout@2.3.0" data-semver="2.3.0" src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
    <script data-require="bootstrap@2.3.2" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    -->
    <link rel="stylesheet" href="style.css" />
   <!--
    <script src="ge-jquery-widget.js"></script>
    <script src="script.js"></script>
  -->
    
  </head>
 
  <body>
  
  
    <div id="widget-354ccd28d-87c9-47a4-a381-0a850b2c5a61_" 
      data-template='{"title":"Widget Instance 1"}'>
    </div>
      
      
    <div id="widget-354ccd28d-87c9-47a4-a381-0a850b2c5a61_-2" 
      data-template='{"title":"Widget Instance 2"}'></div>
    
  </body>

</html>

/* Styles go here */

body {
  padding:15px;
  background:#eee;
}

.module {
  margin-top:10px;
  background: #ffffff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 15px;
  position: relative;
  *zoom: 1;
}
.module:before,
.module:after {
  display: table;
  content: "";
  line-height: 0;
}
.module:after {
  clear: both;
}
.module .module-header {
  line-height: 20px;
  margin-bottom: 15px;
  min-height: 20px;
  *zoom: 1;
}
.module .module-header:before,
.module .module-header:after {
  display: table;
  content: "";
  line-height: 0;
}
.module .module-header:after {
  clear: both;
}
.module .module-header > * {
  line-height: inherit;
}
.module .module-body {
  *zoom: 1;
}
.module .module-body:before,
.module .module-body:after {
  display: table;
  content: "";
  line-height: 0;
}
.module .module-body:after {
  clear: both;
}
.module .module-body dl:first-child {
  margin-top: 0;
}
.module .module-footer > :first-child {
  margin-top: 15px;
}
.module .module-body div:last-child,
.module .module-body p:last-child,
.module .module-body ul:last-child,
.module .module-body ol:last-child,
.module .module-body dl:last-child,
.module .module-footer *:last-child {
  margin-bottom: 0;
}
.module .module-body > hr {
  margin: 0 -15px 5px;
  border: 1px solid #e1e2e5;
}
.module.draggable {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 0;
  height: 290px;
}
.module.draggable .module-header {
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  margin-bottom: 0;
  padding: 15px;
}
.module.draggable .module-header:hover {
  cursor: move;
}
.module.draggable .module-header:active {
  background-color: #edeeef;
}
.module.draggable .module-body {
  display: table;
  height: 225px;
  width: 100%;
}
.module.draggable .module-body > div:first-child {
  display: table-cell;
  padding: 0 15px;
  vertical-align: middle;
  width: 100%;
}
.module.draggable .module-footer {
  padding-left: 15px;
  padding-right: 15px;
}
.module.draggable .module-footer > :last-child {
  margin-bottom: 15px;
}
.module.scrollable .module-body {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
}
.module.scrollable .module-body > div {
  display: block;
}
.module.chromeless {
  background: transparent;
  padding: 0;
}
.module.chromeless .module-header,
.module.chromeless .module-footer {
  display: none;
}
.module.fullwidth {
  padding: 0 0 10px;
}
.module.ui-sortable-placeholder {
  background-color: #edeeef;
  visibility: visible !important;
}
.module.ui-sortable-placeholder .module-header,
.module.ui-sortable-placeholder .module-body,
.module.ui-sortable-placeholder .module-footer {
  visibility: hidden;
}
.module.ui-sortable-helper {
  border: 1px solid #e1e2e5;
}
.module.ui-sortable-helper .module-header {
  background-color: #edeeef;
}
.module.nestable {
  margin-bottom: 0;
}
.module.collapsible {
  padding-top: 0px;
}
.module.collapsible .module-header {
  margin-bottom: 0px;
  padding-top: 15px;
  padding-left: 18px;
  cursor: pointer;
}
.module.collapsible .module-header i.module-arrow {
  position: absolute;
  left: 15px;
}
.module.collapsible .module-header:hover {
  color: #22436b;
}
.module.collapsible .collapse:before {
  content: " ";
  padding-top: 15px;
}
.module-group > .module:first-child {
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}
.module-group > .module {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.module-group > .module:last-child {
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}
.module-group > hr {
  margin: 0;
  border: 1px solid #e1e2e5;
}

// This assumes we are using the RequireJS+jQuery file, and 
// that the following files are all in the same directory: 
define([
    "jquery", 
    "jqueryui",
    "jquerytmpl", 
    "text!jquery-plugin-require-tmpl.html"
    ], function ( $, ui, jquerytmpl, tmpl) {

  
    var $el = null;
    var widgetOptions = {};
    var widgetOverwrite = {};
    var widgetSettings = {
      "global":{},
      "data":[],
      "properties":{
        "text":{
          "value":"Enter your paragraph text..."},
          "voice":{
            "value":"voice-brand"
            }
          }
        };
    
    $.widget( "v.vWidget", { 

        // Options to be used as defaults
        options: {}, 

        // Set up widget (e.g. create element, apply theming, 
        // bind events, etc.)
        _create: function () {
          $elem = this.element;
          // This next line takes advantage of HTML5 data attributes
          // to support customization of the plugin on a per-element
          // basis. For example,
          // <div class=item" data-plugin-options="{"message":"Goodbye World!"}"></div>


            // _create will automatically run the first time 
            // this widget is called. Put the initial widget 
            // set-up code here, then we can access the element 
            // on which the widget was called via this.element.
            // The options defined above can be accessed via 
            // this.options

            // this.element.addStuff();
            // this.element.addStuff();
            
            var tmplOptions = $.extend(this.options.template, $elem.data('template'));
            var html = $.tmpl( tmpl, tmplOptions );
            
            // Compile the markup as a named template
            //var html = $.template( "vWidgetTmpl", tmpl );
            $elem.append(html);
            
            //Add the styles
            $elem
              .find('header').addClass('module-header')
              .find('h3').addClass('voice voice-brand pull-left');
        },

        // Destroy an instantiated plugin and clean up modifications 
        // that the widget has made to the DOM
        destroy: function () {
            // this.element.removeStuff();
            // For UI 1.8, destroy must be invoked from the base 
            // widget
            $.Widget.prototype.destroy.call( this );
            // For UI 1.9, define _destroy instead and don't worry 
            // about calling the base widget
        },

        methodB: function ( event ) {
            // _trigger dispatches callbacks the plugin user can 
            // subscribe to
            // signature: _trigger( "callbackName" , [eventObject], 
            // [uiObject] )
            this._trigger( "methodA", event, {
                key: 'value'
            });
            
            
             console.log('methodB', this.options, event);
            //$elem.append('Hi');
        },

        methodA: function ( event ) {
          console.log('methodA', this.options, event);
          
          
            this._trigger("dataChanged", event, {
                key: 'value'
            });
        },
        
        render: function(event){
          console.log('render ui', event);
          var html = $.tmpl( tmpl, $.extend(this.options.template, $elem.data('template'), event));
          $elem.html(html);
        },
        
        update: function(event){
          
        },
        
        fetchMarkup: function(event){
          
        },
        
        fetchSchema: function(event){
          
        },

        // Respond to any changes the user makes to the option method
        _setOption: function ( key, value ) {
            switch (key) {
            case "someValue":
                // this.options.someValue = doSomethingWith( value );
                break;
            default:
                this.options[ key ] = value;
                break;
            }
            console.log(this.options);

            // For UI 1.8, _setOption must be manually invoked from 
            // the base widget
            $.Widget.prototype._setOption.apply( this, arguments );
            // For UI 1.9 the _super method can be used instead
            // this._super( "_setOption", key, value );
        }

    }); 
});

<section id="moduleSection6" 
  class="module span8" 
  data-index="6" 
  data-uuid="a1e22bb6-bf6d-4111-a474-980247c755e3_">
	
	<header>
    <h3 id="module-6-title">${title}</h3>
	</header>
	
	<div class="module-body" 
	  id="module_6a1e22bb6-bf6d-4111-a474-980247c755e3_" 
	  name="placeholder6" 
	  data-index="6" 
	  data-uuid="a1e22bb6-bf6d-4111-a474-980247c755e3_">
	  
	  {{html content}}
	  
	</div>
	<footer>
	  ${footer}
	</footer>
</section>

requirejs.config({
    baseUrl: './',
    paths: {
        "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min",
        "jqueryui": "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min",
       "jquerytmpl":"jquery.tmpl.min",
        "underscore": "//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min",
        "handlebars" : "//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min",
        "text" : "//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.3/text",
        "vWidget": "jquery-plugin-require"
    }
});

define(["require", "jquery", "jqueryui", "vWidget"], function (req, $, ui, vWidget) {
  $(function () {
     
      //Create instance of the widget
      var instance = $("#widget-354ccd28d-87c9-47a4-a381-0a850b2c5a61_").vWidget({
        template: {
          title: 'My Widget',
          footer: 'Footer',
          content: 'This is injectable content'
        },
        settings: {
          attributes : {},
          cols : "priority, machine, room_id, patient_id, responder_id, created",
          data : [],
          url : "/assets/data/table-data.json"
        },
        //Once the widget is created
        create: function(data){
          console.log('onCreate', data);
        },
        //Callback handlers on internal widget events
        dataChanged: function(data){
          console.log('dataChanged', data);
        }
      });
      
      //Call instance methods on that widget.
      instance.vWidget("methodA", {name: 'test'});
      instance.vWidget("methodB", {name: 'test2'});
      
      console.log(instance);  
      
      
      
      
      
      
      
      
      
      
      
      
      
      var instance2 = $("#widget-354ccd28d-87c9-47a4-a381-0a850b2c5a61_-2").vWidget({
        template: {
          content: '<a href="#" class="btn">Test</a>'
        },
        settings: {
          attributes : {},
          cols : "priority, machine, room_id, patient_id, responder_id, created",
          data : [],
          url : "/assets/data/table-data.json"
        },
        //Once the widget is created
        create: function(data){
          console.log('onCreate', data);
        },
        //Callback handlers on internal widget events
        dataChanged: function(data){
          console.log('dataChanged', data);
        }
      });
      
      //Call instance methods on that widget.
      instance2.vWidget("methodB", {name: 'test2'});
      
      
      $('.btn').bind('click', function(e){
        instance2.vWidget("render", {title: 'Render Test', footer: 'Updated Footer'});  
        return false;
      });
      
      console.log(instance2);  
  });
});

/*
 * jQuery Templates Plugin 1.0.0pre
 * http://github.com/jquery/jquery-tmpl
 * Requires jQuery 1.4.2
 *
 * Copyright 2011, Software Freedom Conservancy, Inc.
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 */
(function(a){var r=a.fn.domManip,d="_tmplitem",q=/^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,b={},f={},e,p={key:0,data:{}},i=0,c=0,l=[];function g(g,d,h,e){var c={data:e||(e===0||e===false)?e:d?d.data:{},_wrap:d?d._wrap:null,tmpl:null,parent:d||null,nodes:[],calls:u,nest:w,wrap:x,html:v,update:t};g&&a.extend(c,g,{nodes:[],parent:d});if(h){c.tmpl=h;c._ctnt=c._ctnt||c.tmpl(a,c);c.key=++i;(l.length?f:b)[i]=c}return c}a.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(f,d){a.fn[f]=function(n){var g=[],i=a(n),k,h,m,l,j=this.length===1&&this[0].parentNode;e=b||{};if(j&&j.nodeType===11&&j.childNodes.length===1&&i.length===1){i[d](this[0]);g=this}else{for(h=0,m=i.length;h<m;h++){c=h;k=(h>0?this.clone(true):this).get();a(i[h])[d](k);g=g.concat(k)}c=0;g=this.pushStack(g,f,i.selector)}l=e;e=null;a.tmpl.complete(l);return g}});a.fn.extend({tmpl:function(d,c,b){return a.tmpl(this[0],d,c,b)},tmplItem:function(){return a.tmplItem(this[0])},template:function(b){return a.template(b,this[0])},domManip:function(d,m,k){if(d[0]&&a.isArray(d[0])){var g=a.makeArray(arguments),h=d[0],j=h.length,i=0,f;while(i<j&&!(f=a.data(h[i++],"tmplItem")));if(f&&c)g[2]=function(b){a.tmpl.afterManip(this,b,k)};r.apply(this,g)}else r.apply(this,arguments);c=0;!e&&a.tmpl.complete(b);return this}});a.extend({tmpl:function(d,h,e,c){var i,k=!c;if(k){c=p;d=a.template[d]||a.template(null,d);f={}}else if(!d){d=c.tmpl;b[c.key]=c;c.nodes=[];c.wrapped&&n(c,c.wrapped);return a(j(c,null,c.tmpl(a,c)))}if(!d)return[];if(typeof h==="function")h=h.call(c||{});e&&e.wrapped&&n(e,e.wrapped);i=a.isArray(h)?a.map(h,function(a){return a?g(e,c,d,a):null}):[g(e,c,d,h)];return k?a(j(c,null,i)):i},tmplItem:function(b){var c;if(b instanceof a)b=b[0];while(b&&b.nodeType===1&&!(c=a.data(b,"tmplItem"))&&(b=b.parentNode));return c||p},template:function(c,b){if(b){if(typeof b==="string")b=o(b);else if(b instanceof a)b=b[0]||{};if(b.nodeType)b=a.data(b,"tmpl")||a.data(b,"tmpl",o(b.innerHTML));return typeof c==="string"?(a.template[c]=b):b}return c?typeof c!=="string"?a.template(null,c):a.template[c]||a.template(null,q.test(c)?c:a(c)):null},encode:function(a){return(""+a).split("<").join("&lt;").split(">").join("&gt;").split('"').join("&#34;").split("'").join("&#39;")}});a.extend(a.tmpl,{tag:{tmpl:{_default:{$2:"null"},open:"if($notnull_1){__=__.concat($item.nest($1,$2));}"},wrap:{_default:{$2:"null"},open:"$item.calls(__,$1,$2);__=[];",close:"call=$item.calls();__=call._.concat($item.wrap(call,__));"},each:{_default:{$2:"$index, $value"},open:"if($notnull_1){$.each($1a,function($2){with(this){",close:"}});}"},"if":{open:"if(($notnull_1) && $1a){",close:"}"},"else":{_default:{$1:"true"},open:"}else if(($notnull_1) && $1a){"},html:{open:"if($notnull_1){__.push($1a);}"},"=":{_default:{$1:"$data"},open:"if($notnull_1){__.push($.encode($1a));}"},"!":{open:""}},complete:function(){b={}},afterManip:function(f,b,d){var e=b.nodeType===11?a.makeArray(b.childNodes):b.nodeType===1?[b]:[];d.call(f,b);m(e);c++}});function j(e,g,f){var b,c=f?a.map(f,function(a){return typeof a==="string"?e.key?a.replace(/(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g,"$1 "+d+'="'+e.key+'" $2'):a:j(a,e,a._ctnt)}):e;if(g)return c;c=c.join("");c.replace(/^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/,function(f,c,e,d){b=a(e).get();m(b);if(c)b=k(c).concat(b);if(d)b=b.concat(k(d))});return b?b:k(c)}function k(c){var b=document.createElement("div");b.innerHTML=c;return a.makeArray(b.childNodes)}function o(b){return new Function("jQuery","$item","var $=jQuery,call,__=[],$data=$item.data;with($data){__.push('"+a.trim(b).replace(/([\\'])/g,"\\$1").replace(/[\r\t\n]/g," ").replace(/\$\{([^\}]*)\}/g,"{{= $1}}").replace(/\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,function(m,l,k,g,b,c,d){var j=a.tmpl.tag[k],i,e,f;if(!j)throw"Unknown template tag: "+k;i=j._default||[];if(c&&!/\w$/.test(b)){b+=c;c=""}if(b){b=h(b);d=d?","+h(d)+")":c?")":"";e=c?b.indexOf(".")>-1?b+h(c):"("+b+").call($item"+d:b;f=c?e:"(typeof("+b+")==='function'?("+b+").call($item):("+b+"))"}else f=e=i.$1||"null";g=h(g);return"');"+j[l?"close":"open"].split("$notnull_1").join(b?"typeof("+b+")!=='undefined' && ("+b+")!=null":"true").split("$1a").join(f).split("$1").join(e).split("$2").join(g||i.$2||"")+"__.push('"})+"');}return __;")}function n(c,b){c._wrap=j(c,true,a.isArray(b)?b:[q.test(b)?b:a(b).html()]).join("")}function h(a){return a?a.replace(/\\'/g,"'").replace(/\\\\/g,"\\"):null}function s(b){var a=document.createElement("div");a.appendChild(b.cloneNode(true));return a.innerHTML}function m(o){var n="_"+c,k,j,l={},e,p,h;for(e=0,p=o.length;e<p;e++){if((k=o[e]).nodeType!==1)continue;j=k.getElementsByTagName("*");for(h=j.length-1;h>=0;h--)m(j[h]);m(k)}function m(j){var p,h=j,k,e,m;if(m=j.getAttribute(d)){while(h.parentNode&&(h=h.parentNode).nodeType===1&&!(p=h.getAttribute(d)));if(p!==m){h=h.parentNode?h.nodeType===11?0:h.getAttribute(d)||0:0;if(!(e=b[m])){e=f[m];e=g(e,b[h]||f[h]);e.key=++i;b[i]=e}c&&o(m)}j.removeAttribute(d)}else if(c&&(e=a.data(j,"tmplItem"))){o(e.key);b[e.key]=e;h=a.data(j.parentNode,"tmplItem");h=h?h.key:0}if(e){k=e;while(k&&k.key!=h){k.nodes.push(j);k=k.parent}delete e._ctnt;delete e._wrap;a.data(j,"tmplItem",e)}function o(a){a=a+n;e=l[a]=l[a]||g(e,b[e.parent.key+n]||e.parent)}}}function u(a,d,c,b){if(!a)return l.pop();l.push({_:a,tmpl:d,item:this,data:c,options:b})}function w(d,c,b){return a.tmpl(a.template(d),c,b,this)}function x(b,d){var c=b.options||{};c.wrapped=d;return a.tmpl(a.template(b.tmpl),b.data,c,b.item)}function v(d,c){var b=this._wrap;return a.map(a(a.isArray(b)?b.join(""):b).filter(d||"*"),function(a){return c?a.innerText||a.textContent:a.outerHTML||s(a)})}function t(){var b=this.nodes;a.tmpl(null,null,null,this).insertBefore(b[0]);a(b).remove()}})(jQuery);