Skip to content

Instantly share code, notes, and snippets.

@tivac
Last active October 3, 2015 08:18
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tivac/cb8e25c334fd7c21367c to your computer and use it in GitHub Desktop.
Save tivac/cb8e25c334fd7c21367c to your computer and use it in GitHub Desktop.

Loading Templates via YUI Loader

Our combo-handler supports hooks, so when the YUI Loader makes a request like:

/combo/_/handlebars/GW2/items.handlebars

the handlebars hook fires, splits up the request on "/" characters then does a bit of a dance to determine what namespaced object the Template.js file should create.

YUI config##

...
    groups : {
        views : {
            "view-home-sidebar" : {
                path : "view-home-sidebar.js",
                requires : [
                    "base",
                    "view",
                    "gw2-template-home-sidebar",
                    "gw2-template-home-sidebar-item"
                ]
            }
        },
        
        "gemstore-templates" : {
            combine   : true,
            comboBase : "/combo/_",
            root      : "/handlebars/GW2/",
            patterns : {
                "gw2-template" : {
                    configFn : function(me) {
                        me.path = me.name.replace("gw2-template-", "") + ".handlebars";
                        me.requires = [ "handlebars-base" ];
                    }
                }
            }
        }
    }
...

Template Module

YUI.add('gw2-template-items', function(Y) {

    Y.namespace('GW2.Templates')['items'] = Y.Handlebars.template(
        //generated handlebars FN
    );
    
}, '', { requires : [ 'handlebars-base' ]});

Usage

var Templates = Y.namespace("GW2.Templates");
    
Views.Base = Y.Base.create("viewBase", Y.View, [], {
    template : Templates.items,
    
    
    initializer : function(config) {
        var self = this;
        
        Y.Handlebars.registerPartial("item", Templates.item);
    },
    
    render : function() {
        this.get("container").setContent(this.template({}));
    }
});

Combo Server Hooks

Left as an exercise for the reader, as that part is for our custom server-side app framework.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment