Question

有没有办法在模板中定义/创建变量对象并将其传递给部分帮助器？这就是我想要实现的目标。

    {{#defineVariable myData='{"images": ['..src1', '..src2']}' }}

    {{> somePartial myData}}

因此“somePartial”部分将具有上面定义的数据。

Answer 1

您可以通过哈希参数将数据传递给部分：

{{> myPartial param1=value1 paramN=valueN }}

您也可以将自定义上下文传递给partial：

{{> myPartial myOtherContext }}

在您的特定情况下，因为您想要将JSON字符串作为上下文发送，您需要一个自定义块帮助器来执行此操作：

Handlebars.registerHelper("parseJSON", function(string, data, options) {
    string = string.replace(/\{\{([\w]+)\}\}/g, function(str, group) {
        return data[group] || "";
    });

    return options.fn(JSON.parse(string));
});

并像这样使用它：

{{#parseJSON '{"images": ["{{src1}}", "{{src2}}"]}' this}}
     {{> somePartial}}
{{/parseJSON}}

this是要替换{{src1}}和{{src2}}的上下文。

以下是将JSON字符串作为上下文传递的完整示例。

//Compile main template
var template = Handlebars.compile($("#test-template").html());

//Register 'foo' partial
Handlebars.registerPartial("foo", $("#foo-partial").html());

Handlebars.registerHelper("parseJSON", function(string, data, options) {
  string = string.replace(/\{\{([\w]+)\}\}/g, function(str, group) {
    return data[group] || "";
  });

  return options.fn(JSON.parse(string));
});

//Your data
var data = [{
  src1: "http://i.imgur.com/9YimTCP.jpg",
  src2: "http://i.imgur.com/DadhsWa.jpg"
}, {
  src1: "http://i.imgur.com/DadhsWa.jpg",
  src2: 'http://i.imgur.com/9YimTCP.jpg'
}];


document.body.innerHTML = template(data);

img { max-width: 100px; }

<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="test-template" type="text/x-handlebars-template">
  {{#each .}}
    {{#parseJSON '{"images": ["{{src1}}", "{{src2}}"]}' this}}
       {{> foo }}
    {{/parseJSON}}
    <hr />
  {{/each}}
</script>

<script id="foo-partial" type="text/x-handlebars-template">
  <div class="foo">
     {{#each images}}
       <img src="{{this}}" />
     {{/each}}
  </div>
</script>

使用哈希参数的示例：

//Compile main template
var template = Handlebars.compile($("#test-template").html());

//Register 'foo' partial
Handlebars.registerPartial("foo", $("#foo-partial").html());

//Your data
var data = {
  "test": [{
    param: "Hi",
    partialParameter: 'Bar'
  }, {
    param: "Bye",
    partialParameter: 'Foo'
  }]
};


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>

<script id="test-template" type="text/x-handlebars-template">
  {{#each test}}
    <!-- Pass parameters to partial -->
    {{> foo custom='hardcoded' other=partialParameter}}
    <hr />
  {{/each}}
</script>

<script id="foo-partial" type="text/x-handlebars-template">
  <div class="foo">
    <div><strong>param:</strong>{{param}}</div>
    <div><strong>other:</strong>{{other}}</div>
    <div><strong>custom:</strong> {{custom}}</div>
  </div>
</script>

有关partials here

的更多信息

在把手上创建模板部分内的变量

1 个答案: