Skip to content

Instantly share code, notes, and snippets.

@MadLittleMods
Last active February 19, 2019 15:44
Show Gist options
  • Save MadLittleMods/c23bceb37836daa24398 to your computer and use it in GitHub Desktop.
Save MadLittleMods/c23bceb37836daa24398 to your computer and use it in GitHub Desktop.
A RequireJS renderer module for adding UI modules/templates to the document
/*
* Available functions:
* renderer.replace(...options...)
* renderer.append(...options...)
* renderer.prepend(...options...)
* renderer.before(...options...)
* renderer.after(...options...)
*
* Options:
* module: The RequireJS module to render.
* The module should return { template: function(context) { }, attach: function(options, elements) { } }
* context: The template context to pass
* attachOptons: Any specific info you can pass into the the `attach` callback
* element: Element to to render the module on/to
* callback: function to call after everything has happened
* localRequire: An optional local reference of RequireJS. If supplied, we will use this to require in dependencies. This is good for not including duplicate dependencies
*
* Syntax:
* renderer.replace('module-lobby', { isServer: true }, {}, $('.main-ui-layout-body.server-lobby'), function(attachReturn) {
* console.log('lobby template rendered');
* });
*
* module-lobby.js
* define(['require', 'hbs!./score-box/score-box', 'css!./score-box/score-box'], function(require, tmpl, css) {
* return {
* template: tmpl,
* attach: function(options, elements) {
* // You can do binding to the `elements` you just added
* // even return some methods
* require(['./score-box/score.bits'], function(scoreBox) {
* scoreBox.bind(elements);
* });
* }
* };
* });
*/
var renderer = (function() {
function genericRender(addTemplateAndReturnElements) {
return function(module, context, attachOptions, element, callback, localRequire) {
// Set require default
// You might want to pass your own require so you know what assets that are already added
require = typeof localRequire !== 'undefined' ? localRequire : require;
require([module], function(cpt) {
// Add the template html into the parent
var elements = addTemplateAndReturnElements(cpt.template(context), element);
// Call the callback
callback(cpt.attach(attachOptions, elements));
});
}
}
return {
replace: genericRender(function(html, element){
return $(element).html(html).children();
}),
append: genericRender(function(html, element){
return $(html).appendTo(element);
}),
prepend: genericRender(function(html, element){
return $(html).prependTo(element);
}),
before: genericRender(function(html, element){
return $(html).insertBefore(element);
}),
after: genericRender(function(html, element){
return $(html).insertAfter(element);
})
}
})();
// Turn this into a RequireJS module
define(function() {
return renderer;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment