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

任何人都有一個魔術，他們的袖子，可能會幫助嗎？

來源

2017-08-28 dvsoukup

難道你只是插入一個製表符？ –

你能詳細說明嗎？將它插入哪裏以及如何？我可以使用除空格之外的選項卡，但仍然需要確定「多少」選項卡/空格以便使屬性有一個很好的垂直對齊。 – dvsoukup

您可以添加標籤到您的變量：

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

然後在你的模板：

：

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

你把標籤它這應該生產的東西這取決於像

來源

2017-08-30 07:45:58

Handlebars.js - 保持值列對齊

回答

相關問題