如何从大型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填充文本框＆＃34; {＆＃34; id＆＃34;：393，＆＃34; state＆＃34;：＆＃34; mississippi＆＃34;，＆＃34 ; lat＆＃34;：null，＆＃34; lng＆＃34;：null，＆＃34; title＆＃34;：＆＃34; someTitle＆＃34;，＆＃34; country＆＃34;：null}＆＃ 34;所以我去试试这个：

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

它打印＆＃34;未定义＆＃34;。

如何让mixin接受fromServer.title的内容？

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

  

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

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

Answer 1

当您在mixin定义中引用参数时，您将它们传递给它们，就像它是普通的pug代码一样，没有引号和大括号。

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 :)。