title: How do I render a list in Jade with a distinct javascript function for each item?
body: <p>I'm using Express and Jade on top of Node.js to build a web app. I have an Express route that pulls a list of words from a database and sends the list to Jade as an array object for rendering. I want to render my Jade page so that on the client side each word, when clicked on, will send a distinct message back to the server.</p>
  
  <p>My code thus far looks something like this...</p>
  
  <p>./routes/show_words_to_user.js:</p>
  
  <pre><code>exports.render_page = function(req, res){
      DBClient.query('SELECT Word FROM Words;', function(err, result){
          res.render('PageTitle',{WordList:result,UserData:UserObj});
      });
  };
  </code></pre>
  
  <p>./views/words.jade:</p>
  
  <pre><code>ul
      each word in WordList
          li= word
  </code></pre>
  
  <p>./routes/update_preference.js (expects to receive a message from client):</p>
  
  <pre><code>exports.update_word = function(req, res){
      DBClient.query('UPDATE Words SET UserLiked = 1 WHERE Word=($1) and UserId=($2)',
          [ClickedWord,UserId],function(err, result){
          res.send('Your word was updated.');
      };
  };
  </code></pre>
  
  <p>I need each word that is rendered in my Jade list to act as a hyperlink that will send a message to the server containing 1) the name of the word that was clicked on and 2) the user id that the server originally passed to Jade.</p>
  
  <p>My first thought was to render each list item as a hyperlink and use jQuery to bind a response function to each item. However, When I used jQuery on the client side, I lost the ability to specify a distinct function for each item in the list.</p>
  
  <p>My second thought was to do inline JavaScript and set onclick= some function that I can pass the text of the list item to, like so:</p>
  
  <pre><code>ul
      each word in WordList
          a(href='#',onclick='js_that_sends_word_to_update_preference(\'' + word + '\')')= word
  </code></pre>
  
  <p>This had undesirable behavior as well, as the page jumps to the top every time I click on a link. I'd thought I could stop this, but I am not able to call the "e.preventdefault" function for the hyperlink because I am passing a string, and not an event, to the onclick function.</p>
  
  <p>I feel like I'm going about this in completely the wrong way. There's probably a clean method for rendering iterative functions in Jade, but it's escaping me.</p>