Show:
Module: handlebars-base
Parent Module: handlebars

Available since 3.5.0

Handlebars is a simple template language inspired by Mustache.

This is a YUI port of the original Handlebars project, which can be found at https://github.com/wycats/handlebars.js.

Methods

compile

(
  • string
  • [options]
)
Function

Compiles a Handlebars template string into a function. To render the template, call the function and pass in a context object.

Parameters:

  • string String

    Handlebars template string to compile.

  • [options] Object optional

    Compiler options.

Returns:

Function:

Compiled template function.

Example:

var template = Y.Handlebars.compile('The pie of the day is {{pie}}!.');
                                                template({pie: 'Pecan'});
                                                // => "The pie of the day is Pecan!"

log

(
  • level
  • message
)

Logs a debugging message. Note that messages will only be logged when the handlebars module is loaded in "debug" mode.

Parameters:

  • level String

    Log level for this message. Supported levels are "debug", "info", "warn", and "error".

  • message String

    Message to log.

precompile

(
  • string
  • [options]
)
String

Precompiles a Handlebars template string into a string of JavaScript code. This can be used to precompile a template at build time or on the server, and the resulting template can then be rendered at runtime or on the client without needing to go through a compile step.

To render a precompiled template, evaluate the code and then pass the resulting function to Y.Handlebars.template() to get back an executable template function.

Parameters:

  • string String

    Handlebars template string to compile.

  • [options] Object optional

    Compiler options.

Returns:

String:

Precompiled template code.

registerHelper

(
  • name
  • fn
  • [inverse=false]
)

Registers a helper function that will be made available to all templates.

Helper functions receive the current template context as the this object, and can also receive arguments passed by the template.

Parameters:

  • name String

    Name of this helper.

  • fn Function

    Helper function.

  • [inverse=false] Boolean optional

    If true, this helper will be considered an "inverse" helper, like "unless". This means it will only be called if the expression given in the template evaluates to a false or empty value.

Example:

Y.Handlebars.registerHelper('linkify', function () {
                                                    return '<a href="' + Y.Escape.html(this.url) + '">' +
                                                        Y.Escape.html(this.text) + '</a>';
                                                });

                                                var source = '<ul>{{#links}}<li>{{{linkify}}}</li>{{/links}}</ul>';

                                                Y.Handlebars.render(source, {
                                                    links: [
                                                        {url: '/foo', text: 'Foo'},
                                                        {url: '/bar', text: 'Bar'},
                                                        {url: '/baz', text: 'Baz'}
                                                    ]
                                                });

registerPartial

(
  • name
  • partial
)

Registers a partial that will be made available to all templates.

A partial is another template that can be used to render part of a larger template. For example, a website with a common header and footer across all its pages might use a template for each page, which would call shared partials to render the headers and footers.

Partials may be specified as uncompiled template strings or as compiled template functions.

Parameters:

  • name String

    Name of this partial.

  • partial Function | String

    Template string or compiled template function.

Example:

Y.Handlebars.registerPartial('header', '<h1>{{title}}</h1>');
                                                Y.Handlebars.registerPartial('footer', 'Copyright (c) 2011 by Me.');

                                                var source = '{{> header}} <p>Mustaches are awesome!</p> {{> footer}}';

                                                Y.Handlebars.render(source, {title: 'My Page About Mustaches'});

render

(
  • string
  • context
  • [options]
)
String

Compiles and renders a Handlebars template string in a single step.

If you'll be using a template more than once, it's more efficient to compile it into a function once using compile(), and then render it whenever you need to by simply executing the compiled function. However, if you only need to compile and render a template once, render() is a handy shortcut for doing both in a single step.

Parameters:

  • string String

    Handlebars template string to render.

  • context Object

    Context object to pass to the template.

  • [options] Object optional

    Compile/render options.

    • [helpers] Object optional

      Helper functions.

    • [partials] Object optional

      Partials.

    • [data] Object optional

      Data.

Returns:

String:

Rendered template string.

Example:

Y.Handlebars.render('The pie of the day is {{pie}}!', {
                                                    pie: 'Maple Custard'
                                                });
                                                // => "The pie of the day is Maple Custard!"

template

(
  • template
)
Function

Converts a precompiled template into a renderable template function.

Parameters:

  • template Function

    Precompiled Handlebars template function.

Returns:

Function:

Compiled template function.

Example:

<script src="precompiled-template.js"></script>
                                                <script>
                                                YUI().use('handlebars-base', function (Y) {
                                                    // Convert the precompiled template function into a renderable template
                                                    // function.
                                                    var template = Y.Handlebars.template(precompiledTemplate);

                                                    // Render it.
                                                    template({pie: 'Pumpkin'});
                                                });
                                                </script>