Skip to content

Instantly share code, notes, and snippets.

@asuh

asuh/templating.js

Last active December 10, 2016 08:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save asuh/f941dcd444f294ed5a220d70df8f70c2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save asuh/f941dcd444f294ed5a220d70df8f70c2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. asuh renamed this gist Dec 10, 2016. 1 changed file with 0 additions and 0 deletions.
    0 js-templating.txt → templating.js
    View file
    File renamed without changes.
  2. asuh renamed this gist Dec 10, 2016. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → js-templating.txt
    View file
    File renamed without changes.
  3. asuh created this gist Dec 10, 2016.
    32 changes: 32 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    'use strict';

    /*
    * Javascript templating system
    */
    $(document).ready(function() {
    function loadTemplate(element, path, callback, done) {
    $.ajax(path).then(function(html) {
    element.append(html);
    if (typeof callback === 'function' ) {
    callback();
    }
    if (typeof done === 'function' ) {
    done(element);
    }
    });
    }

    function loadComponent() {
    var el = $(this);
    var callback = $(el).data('component');
    var templateName = $(el).data('template');
    var template = 'components/' + templateName + '.html';
    loadTemplate($(el), template, window[callback], function(element) {
    // Initialize functions using data-component attributes inside markup
    $(element).find('[data-component]').each(loadComponent);
    });
    }

    // Load components
    $('[data-component]').each(loadComponent);
    });