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

我有一个基于Node.js/Jade的站点，我试图用一些简单的Javascript来添加一些交互性。在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(???); 
});

我可以重写整个布局的东西在HTML中append体，但看起来很愚蠢。每当我改变一个我不得不改变另一个。

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

来源

2011-09-27 Ben Humphreys

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

来源

2011-09-27 13:10:14 Chance

当我第一次设计应用程序时，我曾想过Backbone。不幸的是，它比传统网站更像一个单页高度动态的应用程序。因此，在模型中编辑内容时，交互式方法会很好，目前90％的内容对于Express来说都是完美的。我不确定是否有一种很好的方式来获得两全其美的好处。感谢您的建议:) –

@ BenHumphreys了解，我想我有点困惑，你的意思是通过共享模板和JS之间的代码。 – Chance

根据当天的情况，我认为我的建议更好。我可以将表格行渲染的东西抽象为部分，然后渲染空的部分，并将其作为静态文本放到我的Javascript的某处？现在我只需要研究如何做到这一点。 –

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

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

如果你想让那行持续存在，那么你需要包含一个对服务器的调用，该调用将新行数据添加到foo的数据集合中，然后当页面再次呈现时，服务器会将foo返回，行+你刚添加的行。

来源

2011-09-27 17:00:35 Logos

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

我认为TJ的金融应用可能会给你一个好的开始，请查看[index.jade]（https://github.com/visionmedia/finance/tree/master/views/item）。或者他的[屏幕保护程序]（http://www.screenr.com/G6a）。这是你想要完成的事情吗？你不会使用append（），而是将数据传递回服务器，并让它渲染出包含你的表格的新更新的玉石部分。您只需像这样来回移动，而不是仅在客户端渲染。 – Logos

所以[此功能]（https://github.com/visionmedia/finance/blob/master/public/javascripts/main。js＃L40）被调用并按照上面的说法进行操作？这意味着服务器每次都要做一些工作，但从长远来看，这可能是值得的。人们不会编辑那么多。也许。感谢您的想法！ –

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

回答

相关问题