用jQuery在客户端添加Jade块的内容

当页面加载时，我有一些从Jade加载的内容（例如，连接的用户列表）。 这个内容是dynamic的，通过socket.io消息通知客户它的变化。 客户端的jQuery脚本必须添加新的内容或删除旧的内容 。

问题是新的内容可能非常复杂（例如，用户的所有信息），我必须在客户端脚本中重写HTML代码（而jQuery不是为此而devise的）。

我试图克隆和编辑现有的结构（可以隐藏），但我认为这不是最好的方法。

例

服务器端

#usersList each user in users .userBox .userName #{user.name} .userCountry #{user.country} .userMail #{user.mail} 

客户端

 websocket.on('newUser', function(user) { $('<div class="userBox">'+ '<div class="userName">' + user.name +'</div>'+ '<div class="userCountry">' + user.country +'</div>'+ '<div class="userMail">' + user.mail +'</div>'+ '</div>').appendTo($('#usersList')); }); 

客户端代码是可怕的。 我想知道我是否可以在Jade中拥有一块内容，然后执行此操作。

 websocket.on('newUser', function(user) { $(jade.userBox(user)).apprendTo('#usersList'); }); 

如果不可能，最好的方法是什么？

Answer 1

我不会使用玉来渲染用户，因为我会有2种方法来插入用户，一个用于加载页面时，另一个用于更新。 这对于处理用户的类来说太复杂了。 所以我只是用玉来创build页面模板（占位符），并获取数据到客户端。

 var local_data ={} local_data.users =!{JSON.stringify(usersList)} div#users(class="ui-bar ui-bar-h") 

JS：

 users.add(data); 

其中users.add（）实际上将用户数据和选项存储在数组中，并使用jquery进行一些DOM操作

这可以在加载和无缝更新时使用