Question

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?

Answer 1

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.