1

ページの読み込み時に 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');
});

それが不可能な場合、最善の方法は何ですか?

4

1 に答える 1

1

ユーザーを挿入するには、ページをロードするときと更新するときの 2 つの方法があるため、ユーザーのレンダリングに 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 操作を行う場所

これは、読み込み時とシームレスな更新時に使用できます

于 2012-09-06T15:41:36.040 に答える