如何从大型json对象获取特定数据到Jade mixin

Question

这是我的服务器的json：

data = {"id":393, "state":"mississippi", "lat":null, "lng":null, "title":"someTitle", "country":null};

然后，我将其通过这样的玉庙： res.render('editUpload', {fromServer:data});

然后在我的Jade模板中，我有这个：

var data = !{fromServer};
console.log(data.address);

哪个可以正确打印密西西比州

但是，我正在尝试让我的mixins使用该数据

混合：

mixin textBoxMixin(name, label, value)
    div(style="display:flex; width:100%;")
        span.label #{label}
        input(type="text", name="#{name}", value="#{value}")

然后我这样使用：

+textBoxMixin("title", "Title", fromServer)

它将在文本框中填充整个json“ {” id“：393，” state“：” mississippi“，” lat“：null，” lng“：null，” title“：” someTitle“，” country“： null}”，因此我可以尝试以下操作：

+textBoxMixin("title", "Title", fromServer.title)

它显示“未定义”。

我如何获得此mixin来接受fromServer.title应该是什么？

我已经尝试过JSON.stringify（fromServer），data.address（这显然不起作用，因为在页面呈现期间未定义数据）。 我知道我可以回到我的服务器并解析出所有json并将每个项目作为一个单独的项目传递，但这将是一个巨大的痛苦，因为我的json实际上比我在这里发布的要大得多。

问题是我通过JSON.stringify()将json从route.js文件发送到模板后，这使我可以使用var data = !{fromServer}; JSON.stringify() 在页面的脚本中，但是Jade无法解析String。 所以现在我在路由中这样做，以便同时拥有可用于模板化的json和JavaScript的String：

    data = rows[0][0];
    stringFromServer = JSON.stringify(rows[0][0]);
    res.render('editUpload', {fromServer:data, stringFromServer:stringFromServer, username: req.session.user});

Answer 1

当您在mixin定义中引用参数时，您将传递它们的方式就像普通的帕格代码一样，没有引号和花括号。

mixin textBoxMixin(name, label, value)
  div(style="display:flex; width:100%;")
    span.label= label
    input(type="text", name=name, value=value)

+textBoxMixin("title", "Title", fromServer.title)

呈现的内容如下：

另外，Jade现在是Pug，我知道您知道，因为您在此问题中标记了Pug，所以应该开始将其引用为Pug :)。