Have you ever had the need to pass extra parameters to a template in addition to your data, so that you are able to reuse a single template for a variety of situations? Maybe you need to do some filtering, additional styling, or want to vary some of the text. Without passing this information to your template, you might have to create a number of very similar templates, bloated templates that include lots of branching, or pollute your data with information that is often only related to the UI.
The jQuery Templates plugin does support passing an options map to the .tmpl function. Current KnockoutJS code (after 1.12), now has the ability to pass the options map in the template binding using a
The basic syntax looks like:
In this example, you would then access the option using
$item.header in your template code.
Suppose that your model contains menu items for breakfast, lunch, and dinner. You would like to render a section for each of these types of menu items, but use slightly different styles and header/footer information.
Let’s say our view model looks like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
Along with showing the name and price of each item, we would like to have a custom header, footer, and apply some different styling to each section.
templateOptions, we can have a single template that is able to render the different types of menu items.
1 2 3
Our template can then loop through our items and access the additional options that we passed to it. In this example, I am assuming that the
items are not changing, so we are not using observables, using
foreach on the template binding, or even setting up indvidual bindings in the template.
1 2 3 4 5 6 7 8 9 10 11 12 13
The end result is a single, versatile template for displaying our items.
If you are passing
templateOptions to the template binding from a nested template (so, specifying a
template binding from within a template), then pay special attention to your syntax. You will encounter a problem, if your binding looks like this:
The jQuery Templates plugin gets confused by the
}} at the end of your binding, since that is part of its syntax. Adding a space between your braces will work fine. Hopefully this prevents someone from a little unnecessary frustration.