Handlebars.js - 保持值列对齐

Question

我目前正在Node.js环境中使用Handlebars.js（v 4.0.10）。

我尝试使用以下格式生成JSON字符串，但未能找到解决方案。

给出以下JSON对象：

{
  foo: [
    {bar: 1, baz: "test"},
    {bar: 2, baz: "test", qux: "somethingElse"},
    {bar: 234, baz: "testtest"},
    {bar: 34674, baz: "a", qux: "moreText"},
  ]
}

如何使用把手产生以下内容：

"{
  foo: [
    {bar: 1,         baz: "test"},
    {bar: 2,         baz: "test",      qux: "somethingElse"},
    {bar: 234,       baz: "testtest"},
    {bar: 34674,     baz: "a",         qux: "moreText"},
  ]
}"

注意属性如何与彼此垂直对齐。我有一个粗略的实现工作，但是我不确定如何以正确对齐文本的方式正确保留空白区域。

这是我的模板文件：

{
  "foo": [
    {{#each foo}}
      { "bar": {{bar}},     "baz": "{{{baz}}}"{{#if qux}},      "qux": "{{{qux}}}"{{/if}} }{{#unless @last}},{{/unless}}
    {{/each}}
  ]
}

问题在于，如果一个属性的值具有不同的长度（即234（字符数为3）对比34674（字符数为5）），则会产生＆＃34; stairstepping＆＃34;效果和属性彼此不垂直对齐。因此，它将呈现如下：

"{
  foo: [
    {bar: 1,     baz: "test"},
    {bar: 2,     baz: "test",      qux: "somethingElse"},
    {bar: 234,     baz: "testtest"},
    {bar: 34674,     baz: "a",      qux: "moreText"},
  ]
}"

任何人都有一个神奇的技巧可以帮助他们？

Answer 1

您可以为变量添加标签：

res.render('test', {
  test1: "12345\t",
  test2: "12345678\t",
});

然后在你的模板中：

<pre>
    {{test1}}block
    {{test2}}block
</pre>

这应该会产生类似的东西，具体取决于你放入的标签：