Handlebars.js - 保持值列对齐

问题描述：

我目前在Node.js环境中使用Handlebars.js（v 4.0.10）。Handlebars.js - 保持值列对齐

我试图用下面的格式生成JSON字符串，但在寻找解决方案时一直没有成功。

给出下面的JSON对象：

如何使用车把产生如下：

"{ 
    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}} 
    ] 
}

的问题是，如果一个属性有VS 34674（5字符数的值是不同长度的（即，3 234（字符数））），它会产生“阶梯”效应，并且属性不会彼此垂直对齐。因此，它会这样渲染：

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

任何人都有一个魔术，他们的袖子，可能会帮助吗？

难道你只是插入一个制表符？ –

你能详细说明吗？将它插入哪里以及如何？我可以使用除空格之外的选项卡，但仍然需要确定“多少”选项卡/空格以便使属性有一个很好的垂直对齐。 – dvsoukup

答

您可以添加标签到您的变量：

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

然后在你的模板：

：

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

你把标签它这应该生产的东西这取决于像

Handlebars.js - 保持值列对齐

相关推荐