如何在每个项目中使用不同的javascript函数在Jade中呈现列表？

Question

我在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）服务器最初传递给Jade的用户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中渲染迭代函数可能是一种干净的方法，但它正在逃避我。

Answer 1

我想我找到了一个解决方法。 它不是很漂亮，但确实避免了内联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

Answer 2

所以你的问题不是与节点或Jade有关，而是你要生成的HTML和/或JavaScript？

一个简单的方法就是正常的链接，就像你正在考虑的那样：

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

（我希望Jade语法没问题，我只有很少的expierence）