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

Question

我有一个基于 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 之间共享布局代码？

Answer 1

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

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

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

Answer 2

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