The underlying base grade common to both the Node and browser renderer grades. Although this grade is able to render content, it does not have access to the markdown helper. To use that helper, you need to use one of the Node or Browser renderer grades described below.
| Option | Type | Description |
|---|---|---|
defaultLayout |
String |
The layout to use when none is specified (see the renderWithLayout invoker below). Defaults to main. |
templates (required) |
{Object} |
A map of layouts, pages, and partials, keyed by template name. (see below) |
messages |
{Object} |
A map of message keys and string templates, see below. Defaults to an empty object, i.e. no message keys or string templates. |
The templates option is expected to contain raw template content, keyed by template name, and organized into
groups of "layouts", "pages", and "partials". This layout exactly corresponds to the directory structure expected
by express-handlebars.
templateKey: A{String}representing the name of the template we will render (does not need to have the.handlebarssuffix, which is implied).context: An{Object}representing data that can be referenced from within the template.localeOrLanguage: An optional{String}representing the locale or language to use when rendering content (for example, using the{{message}}helper).- Returns: The rendered content.
Render a template without an enclosing layout, as shown here:
fluid.defaults("my.localisedRenderer.component", {
gradeNames: ["fluid.handlebars.renderer"],
templates: {
pages: {
localisedPage: "<p>{{message-helper key}}</p>"
},
partials: {}
},
messages: {
"hello-message-key": "Hello, %mood world."
}
});
var renderer = my.localisedRenderer.component();
fluid.log(renderer.render("localisedPage", { key: "hello-message-key", mood: "variable"})); // logs `Hello, variable world.`This example also demonstrates the use of message bundles and the {{message-helper}} helper.
templateKey: A{String}representing the name of the template we will render (does not need to have the.handlebarssuffix, which is implied).context: An{Object}representing data that can be referenced from within the template.localeOrLanguage: An optional{String}representing the locale or language to use when rendering content (for example, using the{{message}}helper).- Returns: The rendered content.
Render a template with an enclosing layout. The layout defaults to "main", which just includes the body of the page.
You can specify a layout within the context by passing a template key (relative to options.templates.layouts) as
the top-level layout variable, as shown here:
fluid.defaults("my.renderer.component", {
gradeNames: ["fluid.handlebars.renderer"],
templates: {
layouts: {
main: "<p>Content from the layout.</p>\n{{body}}"
},
pages: {
myPage: "<p>Content from the page.</p>\n{{>myPartial}}"
},
partials: {
myPartial: "<p>Content from the partial.</p>\n<p>Value: {myVariable}}</p>"
}
}
});
var renderer = my.renderer.component();
fluid.log(renderer.renderWithLayout("myPage", { myVariable: "my value" }));
/*
Logs:
<p>Content from the layout.</p>
<p>Content from the page.</p>
<p>Content from the partial.</p>
<p>Value: {myVariable}}</p>
*/A client-side module that provides various template handling capabilities, including rendering content and placing it in the DOM relative to a specified element.
Like the server-side handlebars grade fluid.express.hb, the client-side renderer can use
Handlebars block helpers. In this case, our helpers are expected to be
components with the grade fluid.handlebars.helper. These will automatically be wired in to this component when it is
created.
The base grade does not have the required template data by default. You are expected either to use the
fluid.handlebars.renderer.standalone grade and provide raw template data, or to use the
fluid.handlebars.renderer.serverAware grade and communicate with a server that will return the template content. See
below for details on those grades.
All variations of this component require Handlebars.js.
Markdown-it is required if you want to render markdown
using the {{md}} helper (see the README file for details on helpers).
This grade has no unique options.
Call {that}.render(templateKey, context) (see below) and insert the results after element using
element.after.
Call {that}.render(templateKey, context) (see below) and append the results to the endof the HTML content of element
using element.append.
Call {that}.render(templateKey, context) (see below) and insert the results before element using
element.before.
Call {that}.render(templateKey, context) (see below) and replace the HTML content of element using
element.html.
Call {that}.render(templateKey, context) (see below) and prepend the results to the beginning of the HTML content of
element using element.prepend.
Call {that}.render(templateKey, context) (see above) and replace element completely with the results using
element.replaceWith.
This is an extension of the above fluid.handlebars.renderer grade which communicates with an instance of
fluid.handlebars.inlineTemplateBundlingMiddleware on startup and wires the templates returned into itself.
| Option | Type | Description |
|---|---|---|
templateUrl (required) |
{String} |
The URL (relative or absolute) where our template content can be retrieved. |
This is an extension of the above fluid.handlebars.renderer.serverAware grade, which, in addition to loading templates
as described above, communicates with an instance of fluid.handlebars.inlineMessageBundlingMiddleware on startup and
wires the message bundles into itself. You must use this grade to make effective use of the {{messageHelper}} helper
(see the i18n docs for details).
In addition to the options for fluid.handlebars.renderer.serverAware, this grade supports the following options:
| Option | Type | Description |
|---|---|---|
messageBundleUrl (required) |
{String} |
The URL (relative or absolute) where our message bundle content can be retrieved. |
The core renderer designed both for use as an Express view engine, and in node contexts outside of Express, for example, when rendering mail templates.
| Option | Type | Description |
|---|---|---|
templateDirs |
`Array | String` |
When Express provided its own view engines, it followed a particular convention that we also honor. Within each directory
specified in options.templateDirs (see above), there is expected to be one or more of the following subdirectories:
pages: Contains "pages", which represent the "body" of a document when used withrenderWithLayout, or the entire document when used withrender. See below for details.layouts: Contains "layouts", templates that generate the markup surrounding the "body". Used withrenderWithLayout.partials: Contains "partials", templates that can be used within "pages" or "layouts" using notation like{{>my-partial-name}}.
Child components of this grade that extend the fluid.handlebars.helper grade are made available as block
helpers that can be used when rendering content. By default, this grade includes all of the helpers provided by this
package, with the exception of the initBlock helper used within the view engine.. See the
helpers documentation for details.
The renderer includes the messageHelper helper, which can be used to internationalise and localise template content. On the client side, this should be populated by the "Server Resource Aware" grade.
On the server side, you will need to ensure that the renderer and handlebars itself have access to the full range of
available message bundles in their model.messageBundles. There is a "message bundle loader" provided for this
purpose. Once the renderer, handlebars, etc. has this set of bundles, the specific language bundle is determined per
request based on the locale query parameter, or if that is not found, the Accept-Language HTTP request header.