Gallery
Documentation
Tag Cloud
Marc
YUI Contributor
Last CDN Push: 08/15/12
Build Tag: gallery-2012.08.15-20-00
Project: YUI 3
License: YUI BSD
YUI Version: 3.6.0
Free for use.
Handlebars Loader is intended for pages that contain raw Handlebars templates that need to be compiled on the fly.
<html>
<head>
<script id="some-photo-hbs" type="text/x-handlebars-template">
<div class="box {{type}}">
<span class="img">
<img src="{{url}}">
</span>
</script>
</head>
<body>
[...]
</body>
</html>
Handlebars Loader will simply compile retrieve the element by id, compile the template, store it in a local cache and return the compiled version.
Handlebars Loader also supports loading uncompiled handlebars templates from a url (through a comboloader or directly).
I've also added a smart loader feature that allows you to automatically convert node ids to file references to be loaded on the fly. This makes loading locally from a node included in a template or loading from a remote location completely transparent
var handlebars = new Y.MSA.HandlebarsLoader();
handlebars.raw(id): retrieves the raw content of the Handlebars template
handlebars.preCompile(aIds): takes an array of templateNode ids, compiles the code and stores in the cache
handlebars.template(id): take a templateNodeId and returns the compiled template
handlebars.clear(): clears the cache
handlebars.load(url, config): loads a template from a remote locationconfig: the config object has the following options
process: Compiles the template after loading
sync: Executes the load in a synchronous manner. Necessary if you use load as part of a view initialization
callback: Define a callback function that is called with the resulting compiled template (requires process to be true)ATTRS
autoLoad: true / false. Turn on remote loading when a local id cannot be retrieved from the page
comboLoader: base location for the remote loading. Similar to the YUI comboloader
idConvert: function that the comboLoader uses to convert a supplied node id to a remote file reference.
EXAMPLE
input id = inbox-message_en-hbs
required file location = en/inbox/message.hbsfunction would be:
function(id){
var match = new RegExp("(.+?)(_(..))?\-(hbs)").exec(id);
return match[3] + '/' + (match[1] + "." + match[4]).replace("-","/");
}
Code Sample
<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>YUI({
//Last Gallery Build of this module
gallery: 'gallery-2012.08.15-20-00'
}).use('gallery-handlebars-loader', function(Y) {
var handlebars = new Y.MSA.HandlebarsLoader(),
cfg = {
type : 'box',
url : 'http://assets.freelas.net/91/images/themes/frl/logoNLen.png'
};
var template = handlebars.template('some-photo-hbs');
Y.one('#photo').set('innerHTML',template(cfg));
});
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2012.08.15-20-00'
}).use('gallery-handlebars-loader', function(Y) {
var handlebars = new Y.MSA.HandlebarsLoader(),
cfg = {
type : 'box',
url : 'http://assets.freelas.net/91/images/themes/frl/logoNLen.png'
};
var template = handlebars.load('http://www.mycombo.com/?myapp/some-photo.hbs');
Y.one('#photo').set('innerHTML',template(cfg));
});
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2012.08.15-20-00'
}).use('gallery-handlebars-loader', function(Y) {
var idPattern = /(.+?)(_(..))?\-(hbs)/,
handlebars = new Y.MSA.HandlebarsLoader({
autoLoad:true,
comboLoader:Y.config.combo,
idConvert:function(id){
var match = idPattern.exec(id);
return match[3] + '/' + (match[1] + "." + match[4]).replace("-","/");
}
}),
cfg = {
type : 'box',
url : 'http://assets.freelas.net/91/images/themes/frl/logoNLen.png'
};
var template = handlebars.template('some-photo-hbs');
Y.one('#photo').set('innerHTML',template(cfg));
});
© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info