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

【问题标题】：How do I render a list in Jade with a distinct javascript function for each item?如何在 Jade 中为每个项目呈现一个具有不同 javascript 函数的列表？
【发布时间】：2026-02-07 20:30:01
【问题描述】：

我在 Node.js 之上使用 Express 和 Jade 来构建 Web 应用程序。我有一个 Express 路由，它从数据库中提取单词列表并将列表作为数组对象发送到 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

./routes/update_preference.js（期望收到来自客户端的消息）：

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.');
    };
};

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

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

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

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

这也有不良行为，因为每次单击链接时页面都会跳到顶部。我以为我可以阻止它，但我无法为超链接调用“e.preventdefault”函数，因为我将字符串而不是事件传递给 onclick 函数。

我觉得我正在以完全错误的方式解决这个问题。在 Jade 中渲染迭代函数可能有一个干净的方法，但它让我忽略了。

【问题讨论】：

标签： javascript jquery node.js express pug

【解决方案1】：

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

一个简单的方法是一个普通的链接，就像你最初考虑的那样：

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

（希望Jade语法没问题，我对它的经验很少）

【讨论】：

【解决方案2】：

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

./views/words.jade:

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-* 属性中，如下所示：

http://www.w3schools.com/tags/att_global_data.asp

【讨论】：