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

发布于 2024-12-06 21:00:02 字数 554 浏览 0 评论 0原文

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

I have a Node.js/Jade-based site and I'm trying to add some interactivity with some simple bits of Javascript.

In particular, I'm trying to set up a button that adds a new row to a table.
The table rendering is currently done in Jade, and I'm planning on using JQuery to set up the callback to add the row.

My template looks something like:

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

And I'm thinking my JS callback will be

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

I could rewrite the whole layout stuff in HTML in the append body, but that seems stupid. Every time I change one I'd have to change the other.

Is there a way of sharing the layout code between the Jade template and the Javascript?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

无法言说的痛 2024-12-13 21:00:02

我的意思是,当您编写视图时,您可以访问服务器端变量。您还可以将模型/变量转储为 json 并使用它。最后,您可以查看 Backbone.js 并在客户端/服务器上重用相同的模型。请参阅这篇文章< /a>.

I mean, you have access to the server-side variables when you are writing the view. You could also do a dump of your models/variables to json and use that. Finally, you could look at Backbone.js and reuse the same models on the client/server. See this post.

抱着落日 2024-12-13 21:00:02

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

如果是后者,那么您只需通过 jquery 添加表行,就像添加完整 html 的网站一样。当您调用 jquery 函数时,express 已经将 jade 模板渲染为完整的 html。

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

So... I don't think I fully understand what you're asking. Do you want the table to be static between sessions or just within the context of a single session or refresh?

If it's the latter then you just add the table row via jquery like you would a site that was full html. By the time you're calling the jquery function express has already rendered the jade templates out to full html.

If you want that row to persist then you need to include a call to the server that adds that new row's data to your data collection for foo, then whenever the page renders again the server will pass foo back with all the prior rows + the one you just added.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文