4

私はjQueryとasp.netの初心者です。SignalRを使用して簡単なチャットアプリケーションを作成しました。そのデザインはここにあります。

以前から他のユーザーとチャットしているときに他のユーザーから電話がかかってきたときに、そのチャットデザインの新しいインスタンスを作成するにはどうすればよいですか。ここで、ユーザーコントロールに変換できると思います。Idしかし、他のチャットデザインに使用しているものと同じものは使用したくないので、生成されたインスタンスの動作は異なるはずです。つまり、userA呼び出しuserBと同時にuserC呼び出しを行う場合は、userBで一意である必要があるように作成する必要があります。独自の呼び出しを処理します（FBチャットのように）。

新しいインスタンスを正常に作成した後に発生する可能性のある別の問題は、それらがjQuery関数とサーバー側コードに自動的にアタッチされない可能性があることです。もしそうなら、とにかくこれも解決しますか？

ここで尋ねる前に、私はたくさん検索しました（多分私は検索する正確なキーワードを知りません）。

編集：多くのjQuery開発者は、Knockout.jsまたはBackbone.jsまたは単純なjQueryを使用することを提案しました。しかし、ユーザーコントロールやHTTPハンドラー（または他の何か）などのASP.NET関数を使用してこれを実現する簡単な方法があると思います。それについて私は何も知りません。では、どのコンセプトを選ぶべきか教えてください。そして、詳細な説明をお願いします（可能であれば簡単な例で）。

jquery関連の回答も歓迎します。

シングルインスタンス

ここに画像の説明を入力してください

複数のインスタンス

ここに画像の説明を入力してください

4

2 に答える 2

4

JQueryを使用して、チャットの新しいインスタンスを入力またはポップアップしますが、jqueryを使用してIDを変更します。親を簡単に取得して複製し、IDまたはコンテンツを変更できるように、すべてのスタイルとIDを親コンテナーに従って実行することをお勧めします。

「updateme1」updateme2などのIDで埋められていないチャットウィンドウを保持し、テンプレートとして取得したら、すべてのIDを関連するコンテンツに1つずつ置き換えます。

あなたはそれを正しくやっていて、私はあなたが調べる必要があるそのsignalRを考えていません。SignalRは、この人が現在の人とチャットしているかどうかに基づいて、「requirechatwindow = trueまたはfalse」などの特定のパラメーターを渡すのに役立ちますが、現在開いているチャットセッションを実行することで、クライアントでもいつでもこれを行うことができます。現在のチャットセッションにAとBの間のチャットが含まれていない場合は、新しいIDで新しいウィンドウを開き、データ-from=Aとdata-to=Bをプレースホルダーとして配置して、このチャットがAとBの間であることを確認します。

お役に立てれば

更新されたフィドルとテクニック

これが、作成と複数のIDを表示するように編集されたフィドルの修正です。別の場所にあるボックスを表示するためにCSSの一部を調整する必要がありました。

いくつかのコメントでコードを更新しました

テクニックは簡単です：

  1. ページにhtmlテンプレートを作成すると、非表示の領域にある可能性があります
  2. 次に、それを使用してコンテナに新しい要素を作成し、この要素をピックアップするためのハンドルを持っています。たとえば、私のコードでは、currentidは私のハンドルですが、コンテナ名を知っているので、実際のコンテナ内に入力されたテンプレートのみをピックアップして、との競合を回避します。テンプレート自体。
  3. 新しいIDを割り当てると、そこで任意のイベントまたは任意の特殊オブジェクトを使用できます。

  4. 次に、新しいIDまたはその中にあるその他のハンドルから新しい要素を取得できます。たとえば、それを非表示にするために確認してクリックを追加しました。

    $('#doubleme').click(function(){    
    var currentid = $("#chattemplate .chat-outline").attr('data-tid');     
    var newid = parseInt(currentid,10) + 1;
    $("#chatcontainers").append($("#chattemplate").html());    
    $("#chatcontainers .chat-outline").attr('id',"id"+newid); 
    $("#chattemplate .chat-outline").attr('data-tid',newid);  
});

実際に必要なのはこれらの5行のコードだけで、フィドルに行くと、すべてコメントしましたが、理解しやすいです。私はフィドルで使用されているセレクターを使用していますが、これらは、data-handle-for名前などの属性を使用してさらに最適化できます。

SignalRでこれを検討している場合は、新しい要求のハブ応答内で、クライアントですべてをセットアップできる開始チャットウィンドウを呼び出すことができます。そのデータハンドルを使用する後続のメッセージは、この新しいチャットウィンドウ内で更新できます。

たとえば、「chatwindow7」と「chatwindow8」という新しいグループを作成し、sendメソッドなどでラウンドトリップして、このグループのユーザーのみにブロードキャストするとします。次に、各ユーザーが複数のウィンドウを開いている可能性がありますが、そのデータハンドルを持つメッセージのchatwindow7を取得し、更新するだけで済みます。

1対1のチャットユーザーのみを使用している場合は、接続IDも使用できます。つまり、ブロードキャストされるすべてのメッセージには送信者と受信者の両方の接続IDがあり、接続IDハンドルとメッセージのリストなどを更新します。

于 2013-01-07T15:14:21.777 に答える
3

これを行う最も簡単な方法は、id属性をクラス属性に置き換えることです。

<div id="chat-outline">
    ...
</div>

になります

<div class="chat-outline">
    ...
</div>

そして、CSSを適切に更新します。

.chat-outline
{
    background-color: gray;
    ....
}

次に、text / templateタグを使用して、jQueryで使用できるようにします。

<script type="text/template" id="chat-template">
    <div class="chat-outline">
        ...
    </div>
</script>

ブラウザは認識しないスクリプトタイプを無視するため、これはhtmlレンダリングエンジンによって無視されることに注意してください。ただし、IDがあるため、jQueryに表示され、次のようにアクセスできます。

<div id="container">
</div>
<script type="text/javascript">
    $(function() {
        var chatTemplate = $('#chat-template').html();
        $('#container').append(chatTemplate);  // First instance
        $('#container').append(chatTemplate);  // Second instance
        $('#container').append(chatTemplate);  // Third instance
    });
</script>

もちろん、コードでチャットインスタンスのハンドルとしてid属性が必要な場合は、IDを指定してチャットインスタンスのhtmlを作成する関数を作成できます。この場合、アンダースコアを使用してランダムID、テンプレート、および反復関数を提供しますが、別のライブラリを使用したり、独自のライブラリを作成したりするのは簡単です。

<div id="container">
</div>
<script type="text/template" id="chat-template">
    <div class="chat-outline" id="<%= id %>">
        ...
    </div>
</script>
<script type="text/javascript">
    var createChatInstance(idstring) {
        return _.template($('#chat-template').html(), { id: idstring });
    }

    $(function() {
        var chatTemplate = $('#chat-template').html();
        // Create an array of 3 unique ids by which chat instances will be accessed.
        var chatIds = [_.uniqueId('chat-outline'), 
                       _.uniqueId('chat-outline'), 
                       _.uniqueId('chat-outline')];
        _.each(chatIds, function(chatId) {
            $('#container').append(createChatInstance(chatId));
        });
        // You now have an array of 3 unique ids matching 3 divs.
        // You can access individual sub-divs via descendent class matching from the id
        // thus: $('#' + chatIds[n] + ' .chat-message').keyup(...code handling event...);

    });
</script>

この時点で、アーキテクチャをさらに進めたい場合は、backbone.jsのようなものを調査することを検討する必要があります。

お役に立てれば。

于 2013-01-15T03:24:24.263 に答える