Question

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

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

./路由/ 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});
    });
};

./视图/ 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）服务器最初传递的用户标识到玉。

我的第一个想法是将每个列表项呈现为超链接，并使用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。

./视图/ words.jade：

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

./公共/ Javascript角/ 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

所以你的问题与node或Jade没有关系，而是你要生成的HTML和/或JavaScript？

一种简单的方法就是普通链接，正如您在原则上所考虑的那样：

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

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

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

2 个答案: