Определить объект и передать его частичной

Question

То, что я хочу сделать:

{{>myPartial foo={bar:1} }} 

Я хочу, чтобы определить объект при прохождении его частичной. Это возможно?

---

Я знаю, что можно передать существующий объект как

{{>myPartial foo=foo}} 

Но я хочу, чтобы определить мой объект в моей разметке.

Почему? Ну в основном потому, что это просто определить макет. Я хочу избежать определения решений макета на бэкэнд.
Мое частичное расположение таблицы, и я хочу скрыть конкретные столбцы.

Но вместо того, чтобы использовать несколько свойств, как

{{>myPartial hideFoo=true hideBar=true}} 

Я хочу использовать единый объект hide

{{>myPartial hide={foo:true,bar:true} }} 

Answer 1

Вы можете передать новый контекст к частичному:

{{> myPartial context }} 

Пример:

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); 

Выход:

<div class="hideFoo hideBar">Hide</div> 

Другой способ передать строку JSON, вместо объекта, используя помощника в пути:

//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>