3

私がしたいこと：

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

オブジェクトをパーシャルに渡しながら定義したい。それは可能ですか？

次のような既存のオブジェクトを渡すことが可能であることを知っています

{{>myPartial foo=foo}}

しかし、マークアップ内でオブジェクトを定義したいと考えています。

なんで？基本的には、レイアウトを定義するだけだからです。バックエンドでのレイアウトの決定を避けたい。
私のパーシャルはテーブル レイアウトで、特定の列を非表示にしたいと考えています。

ただし、次のような複数のプロパティを使用する代わりに

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

単一のオブジェクトを使用したいhide

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

1 に答える 1

2

新しいコンテキストをパーシャルに渡すことができます:

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

もう 1 つの方法は、ヘルパーを使用して、オブジェクトの代わりに JSON 文字列を渡すことです。

//helper
Handlebars.registerHelper("parseJSON", function(string, options) {
  return options.fn(JSON.parse(string));
});

//template    
{{#parseJSON '{"foo": true,"bar": true}'}}
     {{> myPartial}}
{{/parseJSON}}

デモ：

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

于 2016-02-08T05:04:24.470 に答える