在 Jade 和 Javascript 之间共享布局信息

Posted 2023-03-08

【中文标题】在 Jade 和 Javascript 之间共享布局信息

【英文标题】：Sharing layout information between Jade and Javascript

【发布时间】：2011-11-25 23:30:09

【问题描述】：

我有一个基于 Node.js/Jade 的网站，我正在尝试使用一些简单的 javascript 来添加一些交互性。

特别是，我正在尝试设置一个向表格添加新行的按钮。 表格渲染目前在 Jade 中完成，我打算使用 JQuery 设置回调以添加行。

我的模板看起来像：

tbody#my_body
  - each foo in foos
    tr
      td= foo.blah
      td= foo.hello
      td
        a( ... complex link stuff etc. )

我认为我的 JS 回调将是

$("a#add_row").click(function()
  $("#my_body").append( ??? );
);

我可以在 append 正文中用 html 重写整个布局，但这似乎很愚蠢。每次我改变一个，我都必须改变另一个。

有没有办法在 Jade 模板和 Javascript 之间共享布局代码？

【参考方案1】：

所以...我不认为我完全明白你在问什么。您希望表格在会话之间保持静态还是仅在单个会话或刷新的上下文中保持不变？

如果是后者，那么您只需通过 jquery 添加表格行，就像您添加一个完整的 html 网站一样。当您调用 jquery 函数时，express 已经将翡翠模板呈现为完整的 html。

如果您希望该行保持不变，那么您需要包含对服务器的调用，该调用将该新行的数据添加到您的 foo 数据集合中，然后每当页面再次呈现时，服务器会将 foo 与之前的所有行一起传回+ 你刚刚添加的那个。

【讨论】：

对不起，我应该澄清一下。我想知道是否有某种方法可以让 jQuery 检索 Jade 模板的一部分。例如，如果我有一个 mixin 来渲染每一行，然后它以某种方式可用于 jQuery 和服务器端渲染代码。现在我刚刚复制了渲染的输出并将其放入我的 Javascript 回调中。

我认为 TJ 的财务应用程序可能会给您一个良好的开端，请查看index.jade。或他的screenr of the app。那是你想要完成的事情吗？您最终不会使用 append()，而是将数据传回服务器，并让它渲染出包含您的表的新更新的翡翠部分。您只需像这样来回走动，而不是仅仅在客户端进行渲染。

所以this function 被调用并按照你上面所说的那样做？这意味着服务器每次都必须做一些工作，但从长远来看这可能是值得的。人们不会编辑那么多。可能是。感谢您的想法！

没错，一般来说，如果人们向客户端添加任何内容，您无论如何都希望将其添加到某种数据存储中，因此您不妨将其发送回服务器并让它渲染出部分再次。除此之外，您还可以使服务器和客户端与所有更改保持同步，从而实现更多实时性:)

【参考方案2】：

我的意思是，您在编写视图时可以访问服务器端变量。您还可以将模型/变量转储到 json 并使用它。最后，您可以查看 Backbone.js 并在客户端/服务器上重用相同的模型。见this post。

【讨论】：

当我第一次设计应用程序时，我想到了 Backbone。不幸的是，它更像是一个传统网站，而不是单页的高动态应用程序。因此，虽然在模型中编辑内容时，交互式方法会很好，但目前 90% 的内容对于 Express 来说是完美的。我不确定是否有一个很好的方法可以两全其美。谢谢你的建议:)

@BenHumphreys 明白了，我想我对你在模板和 JS 之间共享代码的意思有点困惑。

在白天我想我得到你的建议更好。我可以将表格行渲染内容抽象为部分，然后渲染空部分并将其作为静态文本放入我的 Javascript 中的某个地方？现在我只需要弄清楚如何做到这一点。