1

I'm trying to dynamically update a table of values using SocketStream. I have a Jade template defining the table:

app.jade:

table
  thead
    tr
      th key
      th value
    tbody
      - var jadeItems = [{key:'Test',value:'3.1415'}, {key:'Test2',value:'2.1878'}]
      - each item in jadeItems
        tr
          td= item.key
          td= item.value

This works for the static data, and now I need to make it dynamic. I have client-side CoffeeScript that receives a SocketStream message containing the new values for the table in JSON format:

app.coffee:

SS.events.on('message', (message) ->
  jadeItems = JSON.parse(message)
)

I am trying to figure out how to replace the JSON value of items in Jade with with the content of the message, but the 'jadeItems' variable is out of scope in the client-side CoffeeScript.

I am able to stuff the new JSON into a Jade element, but then I'm unsure how to get the values for the element in the 'jadeItems' variable within Jade.

Does anyone know the Jade syntax for getting the value of a Jade element? Or is there a way to assign to the items variable defined in Jade from within the client-side CoffeeScript? Are there any solid references for Jade syntax?

retrodrone
  • 5,850
  • 9
  • 39
  • 65
  • To clarify: You're using Jade client-side? – Trevor Burnham Nov 03 '11 at 14:59
  • Ooh good question. Maybe not? It's created by SocketStream in the Views directory by default. I assume it's served to the client as is but maybe I'm wrong. I'm new to all this stuff but excited by what I see. Maybe I can update it from server-side CoffeeScript. – retrodrone Nov 03 '11 at 15:01
  • Yeah, I don't think SocketStream does Jade on the client-side by default. The [main page](https://github.com/socketstream/socketstream) says "*Initial* HTML sent to the browser can be written in Jade or plain HTML" (emphasis mine); and [this page](https://github.com/socketstream/socketstream/blob/master/doc/guide/en/developing/client-side_templates.md) suggests using jQuery, not Jade, to perform exactly the kind of Ajax update that you're describing. That page even answers the question "Why not do all templating with Jade?" – Trevor Burnham Nov 03 '11 at 15:11
  • Awesome thank you for the references. I've been racing too fast and I need to read more. But your answer below has helped me greatly. Many thanks! – retrodrone Nov 03 '11 at 15:35

1 Answers1

2

Assuming you're using Jade as a client-side templating library (which is rare, but possible):

In order to do your Ajax update purely through Jade, you'd have to re-render the template. You must be doing something like (using the example from the docs here)

fn = jade.compile template, options
fn locals

What you should be doing is making jadeItems a property of that locals object. So instead of the line

- var jadeItems = [{key:'Test',value:'3.1415'}, {key:'Test2',value:'2.1878'}]

in your template, you'd instead call the Jade render function with

locals = {jadeItems: [{key:'Test',value:'3.1415'}, {key:'Test2',value:'2.1878'}]}
fn locals

Then in your Ajax function, you'd write

locals.jadeItems = JSON.parse message
fn locals

to re-render your template with the new data.

Update: Given the clarification in the comments on the question, the more direct answer is: "Just use jQuery to manipulate the DOM from the Ajax callback." That might look something like

SS.events.on 'message', (message) ->
  items = JSON.parse message
  html = ''
  for item in items
    html += "<tr><td>#{item.key}</td><td>#{item.value}</td></tr>"
  $('tbody').html html

(note that the above assumes that the server response is sanitized and well-formatted).

Trevor Burnham
  • 76,828
  • 33
  • 160
  • 196