Отображение вкладок (пользовательский интерфейс jquery) с помощью Backbone.js & underscore.js - PullRequest
Новая
       17

Отображение вкладок (пользовательский интерфейс jquery) с помощью Backbone.js & underscore.js

2 голосов
/ 25 сентября 2011

В настоящее время я играю с strophe.js, backbone.js & wijmo (библиотека интерфейса на основе jquery UI) и работаю над интерфейсом чата. У меня есть два диалоговых окна, одно - список контактов, другое - контейнер чата. Чат будет организован во вкладках с классической разметкой пользовательского интерфейса jquery: 

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

Каждый отдельный контейнер чата будет содержать список участников (многопользовательский чат), сообщения и форму.

Будучи довольно новым для Backbone и подчеркивания, мне интересно, как лучше всего справиться с этим. Я начал с модели чата, коллекции чатов, просмотра чата и просмотра списка чата, но не могу найти правильный способ отображения вкладок и их обновления.

Есть идеи?

1 Ответ

3 голосов
/ 27 сентября 2011

Используйте роутер.

Создание класса просмотра для чата. Каждый чат получит свой вид и свои вкладки. При обновлении функция 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()

Это то, что входит в представление. Каждому представлению присваивается название. Обратите внимание на использование «Deferred», библиотеки jQuery. Я буду обсуждать это позже.

В вашем роутере определите маршрут для чатов: 

    '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())

Конечно, вы можете обобщить это далее, но идея в том, что всякий раз, когда вы переключаете вкладки, вы просто переключаете метод, чтобы скрыть все, что видно, а затем (Отложенный гарантирует, что это происходит в правильном порядке), отображаете вещь, которой нет. Вкладки поддерживаются каждым представлением; вам придется немного подумать, поскольку они, вероятно, будут находиться за пределами фактического DIV, поддерживаемого View, но это довольно просто. Вам нужно написать отдельный шаблон для ваших объектов вкладок, чтобы создать DOM-объекты вкладок с идентификаторами, которые содержат ваш chatid slug, но это легко управляемо.

Я написал учебник по этому виду одностраничного дизайна: The Backbone Store (ссылка идет на версию Javascript, хотя я в последнее время являюсь сторонником coffeescript), где я также обсуждаю использование этого методика поиска и изменения навигационных средств на основе слагов, таких как вкладки, хлебные крошки и т. п.

...