2

私は現在、strophe.js、backbone.js、および wijmo (jquery UI に基づく UI ライブラリ) で遊んでおり、チャット インターフェイスに取り組んでいます。2 つのダイアログ ボックスがあります。1 つは連絡先リスト、もう 1 つはチャット コンテナーです。チャットは、従来の jquery UI マークアップを使用してタブで整理されます。

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Chat 1</a></li>
        <li><a href="#tabs-2">Chat 2</a></li>
        <li><a href="#tabs-3">Chat 3</a></li>
    </ul>
    <div id="tabs-1"><!-- Content chat 1 --></div>
    <div id="tabs-2"><!-- Content chat 2 --></div>
    <div id="tabs-3"><!-- Content chat 3 --></div>
</div>

個々のチャット コンテナーには、参加者リスト (マルチユーザー チャット)、メッセージ、およびフォームが含まれます。

バックボーンとアンダースコアを初めて使用するので、これを処理する最良の方法は何だろうと思っています。チャット モデル、チャット コレクション、チャット ビュー、チャット リスト ビューから始めましたが、タブをレンダリングして最新の状態に保つ適切な方法が見つかりません。

何か案は ？

4

1 に答える 1

3

ルーターを使用してください。

チャット用の View クラスを作成します。各チャットには、独自のビューと独自のタブがあります。更新時に、ビューの render() 関数は、チャットがユーザーに表示されていなくても、チャットを更新します。

タブの管理に使用するコードは次のようになります。

hide: ->
    if @el.is(":visible") == false
        return null
    $('#' + @id + '-tab').removeClass('activetab').addClass('inactiveTab')
    $.Deferred((dfd) =>
        @el.fadeOut('fast', dfd.resolve)
    ).promise()

show: ->
    if (@el.is(':visible'))
        return
    $('#' + @id + '-tab').removeClass('inactiveTab').addClass('activetab')
    $.Deferred((dfd) =>
        @el.fadeIn('fast', dfd.resolve)
    ).promise()

これがビューに入るものです。各ビューにはスラグ化された名前が付けられます。jQuery ライブラリである「Deferred」の使用に注意してください。それについては後で説明します。

Router で、チャットのルートを定義します。

    'chat/:chatid': 'switchOrStartChat'

そしてメソッド：

    fadeAllViews: () ->
        _.select(_.map(@views, (v) -> v.hide()), (t) -> t != null)

     switchOrStartChat: (chatid) ->
          chat = @views[chatid] ||= new ChatView({chatid: chatid})
          $.when.apply(null, this.fadeAllViews()).then(() -> view.show())

もちろん、これをさらに一般化することもできますが、タブを切り替えるたびに、メソッドを切り替えて、表示されているすべてのものを非表示にし、(Deferred により、これが正しい順序で行われるようにします) 表示されていないものを 1 つ表示するという考え方です。 . タブは各ビューによって維持されます。ビューによって維持される実際の DIV の外にある可能性があるため、少し調整する必要がありますが、それは非常に簡単です。スラッグを含む ID を持つタブ DOM オブジェクトを作成するには、タブ オブジェクト用に別のテンプレートを作成する必要がありますchatidが、これは簡単に管理できます。

この種の 1 ページ デザインに関するチュートリアルを書きました: The Backbone Store (リンクは Javascript バージョンに移動しますが、私は最近はコーヒー スクリプトの信奉者ですが)、この手法を使用してスラッグ ベースのナビゲーションを見つけて変更することについても説明します。タブ、ブレッドクラムなどの補助。

于 2011-09-26T20:39:06.587 に答える