Coffeescript / Zappajs how to pass array to be rendered

Question

This is a zappajs/coffeescript newbie question, I try to write a script that collects from mysql and renders results with div, not tables, works so far with just one row. My question how do I pass on the whole result array for output with the template? Code example below, any criticism welcome, thanks:

@post '/', (req, res) ->    #POST FOR SHOWSTOCK
  MysqlConnection = mysql.createConnection(
    ...
  )
  MysqlConnection.connect()
  .... 
    else
      sql = "select art.artcode,art.artname, art.artsonst, groessen.colcode,groessen.artgrb,groessen.artwidth,groessen.artist,date_format(artoffdate,'%d-%m-%y') as mydate, groessen.soreason from groessen,art where groessen.artcode = art.artcode and  art.artcode = " + MysqlConnection.escape(req.body.art.artcode)
      MysqlConnection.query sql, (err, rows) ->
        throw err if err
        ... 
        exports.art = rows
        ...
  MysqlConnection.end
  @redirect '/showstock'  # 'back' or 'home'= "/"



@get '/': ->     
  @render index: {
     }


@view index: ->    
  h1 img src: '/BW_AL_Logo_Blue.jpg', align:'left', alt:'Logo' , width:240, height:120, top:25, left:370 ,position:'absolute'
  h2 style: "font-family:sans-serif;;position: absolute; top: 10px; width: 250px; left: 350px; height: 25px; background-color: white", 'XYZ Stock Information'
  form method: "post", action: "/", ->
    div "#Artcode", style: "position: absolute; top:60px; left:680px; width: 121px; height: 21px;", ->
      input type: "text", name:"art[artcode]"
    div "#Submit", style: "position: absolute; top:60px; left: 840px; width: 121px; height: 21px;", ->
      input type: "submit", value: "Submit"


@get '/showstock': ->    
  @render showstock: {
     artname0: exports.art[0].artname
     ... 
     }


@view showstock: ->    
  h1 img src: '/BW_AL_Logo_Blue.jpg', align:'left', alt:'Logo' , width:240, height:120, top:25, left:370 ,position:'absolute'
  ...
  div style: "position: absolute; left: 10px; top: 195px; height: 400px; width:1200px; padding: 2px; border:2px solid gray;",->
    div "#colcode", style: "height: 3px;width:90px;float:left;",->
      b "COLOUR"
      br()
      @colcode0
    div ...  

Answer 1

Here's how to pass and use variables to a view function (from http://zappajs.org/docs/crashcourse/):

@get '/': ->
  @render index: {foo: 'bar'}

@view index: ->
  @title = 'Inline template'
  h1 @title
  p @foo

As for iterating over the rows in your resultset, you would have to do something like:

@view index: ->
  for row in @foo.rows
    div '', "#{row.itemno}: #{row.itemname}"

The exact details depend on which template engine you are using (from what you've written, looks like Coffeecup). Keep in mind that Coffeecup templates really are just Coffeescript code with lots of convenience functions (named identically with the HTML tags) and some conventions for rendering a "subtree" (by passing a function that renders the subtree). So for iterating over a data object you simply write Coffeescript code to do that, calling the Coffeecup convenience method for generating the html text.

Assuming your data sets can be large, using a browser redirect (like your code suggests) is not the proper way to pass the data from one view to another.

If you refactor the code in your "showstock" function to be a normal member function, passing along any request/response variables (I see Zappa passes those implicitely, but I do not know enough about Zappa to provide exact answers) and a rows object, just have that function return the rendered text. By calling this method from both your "/" handler and "/showstock" handler, you should be able to handle the different use cases without duplicating the code or trying to pass huge data objects as HTTP data objects.