Define object & pass it to a partial - handlebars.js

Question

What I want to do:
{{>myPartial foo={bar:1} }}
I want to define an object while passing it to a partial. Is that possible?
I know it's possible to pass an existing object like
{{>myPartial foo=foo}}
But I want to define my object within my markup.
Why? Well basically because it's just to define layout. I want to avoid to determine layout decisions on the backend.
My partial is a table layout, and I want to hide specific columns.
But instead of using multiple properties like
{{>myPartial hideFoo=true hideBar=true}}
I want to use a single object hide
{{>myPartial hide={foo:true,bar:true} }}

Answer 1

You can pass a new context to a partial:
{{> myPartial context }}
Example:
var data = {
title: "Foo Bar",
foo: ["foo1", "foo2"],
bar: ["bar1", "bar2"],
hide: {
foo: true,
bar: false
}
};
var content = "{{title}} {{> myPartial hide }}";
var partialContent = "<div class=\"{{#if foo}}hideFoo{{/if}} {{#if bar}}hideBar{{/if}}\">Hide</div>";
var template = Handlebars.compile(content);
Handlebars.registerPartial("foo", partialContent);
template(data);
Output:
<div class="hideFoo hideBar">Hide</div>
Another way is to pass a JSON string, instead of an object, using a helper in the way:
//helper
Handlebars.registerHelper("parseJSON", function(string, options) {
return options.fn(JSON.parse(string));
});
//template
{{#parseJSON '{"foo": true,"bar": true}'}}
{{> myPartial}}
{{/parseJSON}}
Demo:
//Compile main template
var template = Handlebars.compile($("#template").html());
//Register partial
Handlebars.registerPartial("myPartial", $("#myPartial").html());
//Register parseJSON helper
Handlebars.registerHelper("parseJSON", function(string, options) {
return options.fn(JSON.parse(string));
});
//Your data
var data = {
title: "Foo Bar"
};
document.body.innerHTML = template(data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<!-- template.html -->
<script id="template" type="text/x-handlebars-template">
<h1>{{title}}</h1>
<h3>First Partial:</h3>
{{#parseJSON '{"foo": true,"bar": false}'}}
{{> myPartial}}
{{/parseJSON}}
<h3>Second Partial:</h3>
{{#parseJSON '{"foo": false,"bar": false}'}}
{{> myPartial}}
{{/parseJSON}}
</script>
<script id="myPartial" type="text/x-handlebars-template">
<div>hide.foo: {{foo}}</div>
<div>hide.bar: {{bar}}</div>
</script>