时间戳

首页 > 解决方案 > 使用 NodeJS、Express、Handlebars 和 expbhs 渲染 json 数据的服务器端

node.js - 使用 NodeJS、Express、Handlebars 和 expbhs 渲染 json 数据的服务器端

问题描述

所以我在服务器端使用 ExpressJS 和 Handlebars 以及使用 expbhs 视图引擎渲染一些 JSON 数据时遇到了麻烦。鉴于以下情况：

对象：

[
 {
  prop1: 'value',
  prop2: 'value',
  prop3: 'value',
  prop4: 'value'
 },
  prop1: 'value',
  prop2: 'value',
  prop3: '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}}

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

标签： node.jsexpresshandlebars.js

解决方案

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

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

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

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

所以我尝试了以下方法：

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

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

    //assume valid json
    res.render('myTemplate', { 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 或 handlebarsobj默认情况下会添加属性，并且这些属性是在this渲染文档时传入的。这可以解释空<div>的 s

我想出了这一点，因为我正计划将我的布局换成其他东西来进行特定的渲染，并且这样做看起来像这样：

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

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

推荐阅读