如何在Jade中为每个项目呈现一个具有不同javascript函数的列表？

我正在Node.js上使用Express和Jade构建一个web应用程序。我有一个快速路由，它从数据库中提取单词列表，并将列表作为数组对象发送给Jade进行渲染。我想呈现我的Jade页面，这样在客户端，单击每个单词时，都会将一条不同的消息发送回服务器

到目前为止，我的代码看起来像这样

./routes/show_words_to_user.js:

exports.render_page = function(req, res){
    DBClient.query('SELECT Word FROM Words;', function(err, result){
        res.render('PageTitle',{WordList:result,UserData:UserObj});
    });
};

./views/words.jade：

ul
    each word in WordList
        li= word

each word in WordList
    a(href='#', class='contact_server') word

./routes/update_preference.js（期望从客户端接收消息）：

我需要在我的Jade列表中呈现的每个单词充当一个超链接，该超链接将向服务器发送一条消息，其中包含1）单击的单词的名称和2）服务器最初传递给Jade的用户id

我的第一个想法是将每个列表项呈现为超链接，并使用jQuery将响应函数绑定到每个项。然而，当我在客户端使用jQuery时，我失去了为列表中的每个项目指定不同函数的能力

我的第二个想法是使用内联JavaScript并设置onclick=some函数，我可以将列表项的文本传递给它，如下所示：

ul
    each word in WordList
        a(href='#',onclick='js_that_sends_word_to_update_preference(\'' + word + '\')')= word

这也有不受欢迎的行为，因为每次我点击链接时页面都会跳到顶部。我本以为我可以停止此操作，但我无法为超链接调用“e.preventdefault”函数，因为我正在向onclick函数传递字符串，而不是事件

---

我觉得我做这件事的方式完全错了。在Jade中可能有一种干净的方法来渲染迭代函数，但我还是没有想到。

我想我已经找到了一种解决方法。它不是很漂亮，但它确实避免了内联javascript

./views/words.jade：

ul
    each word in WordList
        li= word

each word in WordList
    a(href='#', class='contact_server') word

./public/javascripts/word_clientside.js：

$('.contact_server').click(function(){
    $.get('/update_preference?clicked_word=' + this.innerHTML, function(data){
        alert('Server returned: ' + data);
    });
    return false; //prevents hyperlink from returning to top of page
});

本质上，我使用jQuery将函数绑定到列表中的每个超链接。该函数获取单击的超链接的内部HTML，并将该内部HTML发送到服务器

如果有人知道一种更干净/更传统的方法，我愿意听取建议

更新：

我想我找到了一个更干净的方法。我只是将需要返回到服务器的任何特定于项目的数据嵌入到自定义data-*属性中，如下所示：

---

那么您的问题实际上与node或Jade无关，而是与您想要生成的HTML和/或JavaScript有关

一个简单的方法是一个普通的链接，正如您最初考虑的：

each word in WordList
  a(href='/update_preference?clicked_word=' + encodeURIComponent(word), class='contact_server')= word

（我希望Jade语法可以，我对它只有一点经验）