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

Question

我有一些在页面加载时从 Jade 加载的内容（例如，连接的用户列表）。此内容是动态的，客户端通过 socket.io 消息通知其更改。客户端中的 jQuery 脚本必须添加新内容或删除旧内容。

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

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

示例

服务器端

#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

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

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 操作

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