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

Question

我在 Node.js 之上使用 Express 和 Jade 来构建网络应用程序。我有一个 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给 Jade 。

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

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

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

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

我觉得我正在以完全错误的方式处理这件事。在 Jade 中可能有一个干净的方法来呈现迭代函数，但它正在逃避我。

Answer 1

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

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

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

(我希望 Jade 语法没问题，我对它只有很少的经验)