服务器端使用NodeJS，Express，Handlebars和expbhs渲染json数据

问题描述

所以我在服务器端使用Expressjs和Handlebars以及expbhs视图引擎渲染一些JSON数据时遇到麻烦。给出以下内容：

obj：

[
 {
  prop1: 'value',prop2: 'value',prop3: 'value',prop4: 'value'
 },prop1: 'value',prop4: 'value'
 }
]

控制器：

exports.displayData = (req,res) => {

    //assume valid json
    res.render('myTemplate',{
        obj
    });
}

我的车把模板（myTemplate.hbs）看起来像这样：

{{#each this}}
    <div class='section'>
        <div id="{{prop1}}-section" >
            <div>
                <img src='{{prop2}}'>
            </div>

            <div>
                <div class=''>
                    stuff{{prop3}}
                </div>

                <div>
                    other stuff: {{prop4}}
                </div>

                </div>
                <div>
                    Data for: {{prop1}}
                </div>
            </div>
        </div>
    </div>
{{/each}}

这将呈现模板，但不会填充任何属性值。

解决方法

我意识到我在res.render()调用中将obj包装在另一个obj中，所以我将调用更改为：

exports.displayData = (req,res) => {

    //assume valid json
    res.render('myTemplate',obj);
}

这部分解决了答案。我正在填充所有obj数据，但它也使用空的属性值渲染了额外的.section <div>。

所以我尝试了以下操作：

在控制器中，我将res.render() json参数更改为{ data: obj }，如下所示：

exports.displayData = (req,{ data: obj });
}

并在模板中将#each的块从this更改为data，如下所示：

{{#each data}}
    <div class='section'>
        <div id="{{prop1}}-section" >
            <div>
                <img src='{{prop2}}'>
            </div>

            <div>
                <div class=''>
                    stuff{{prop3}}
                </div>

                <div>
                    other stuff: {{prop4}}
                </div>

                </div>
                <div>
                    Data for: {{prop1}}
                </div>
            </div>
        </div>
    </div>
{{/each}}

我的猜测是，默认情况下，exphbs或handlebars会向obj添加属性，并且这些属性在呈现文档时在this中传递。那将解释空的<div>

我想出了这个原因，因为我正打算将布局换成该特定渲染的其他内容，并且这样做看起来像这样：

exports.displayData = (req,{ 
        data: obj,layout: 'nonDefault'
    });
}