In knockoutjs 1.2.1 I could do:
<div data-bind="template: {name: 'Bar', foreach: persons, templateOptions:{fooMode: true} }"/>
<script id='Bar'>
{{if $item.fooMode}} FOO! {{/if}}
</script>
Which I have tried to translate to knockout 1.3.0beta as
<div data-bind="template: {name: 'Bar', foreach: persons, templateOptions:{fooMode: true} }"/>
<script id='Bar'>
<span data-bind="if: $item.fooMode">FOO!</span>
</script>
But the new native template engine doesn't respect templateOptions.
Is there some other way I can pass arbitrary data into a template?
As you discovered, the native template engine does not support templateOptions
which was a wrapper to the jQuery Template plug-in's options
functionality.
Two ways that you could go:
Place your data on your view model and use $root.fooMode
or $parent.fooMode
inside of your template. This would be the easiest option.
Otherwise, if you don't want the value in your view model, then you can use a custom binding to manipulate the context like:
ko.bindingHandlers.templateWithOptions = {
init: ko.bindingHandlers.template.init,
update: function(element, valueAccessor, allBindingsAccessor, viewModel, context) {
var options = ko.utils.unwrapObservable(valueAccessor());
//if options were passed attach them to $data
if (options.templateOptions) {
context.$data.$item = ko.utils.unwrapObservable(options.templateOptions);
}
//call actual template binding
ko.bindingHandlers.template.update(element, valueAccessor, allBindingsAccessor, viewModel, context);
//clean up
delete context.$data.$item;
}
}
Here is a sample in use: http://jsfiddle.net/rniemeyer/tFJuH/
Note that in a foreach
scenario, you would find your options on $parent.$item
rather than just $item
.