Рендеринг вкладок (jquery ui) с помощью Backbone.js и underscore.js

В настоящее время я играю с strophe.js, backbone.js и wijmo (библиотека пользовательского интерфейса, основанная на пользовательском интерфейсе jquery) и работаю над интерфейсом чата. У меня есть два диалоговых окна, одно — список контактов, другое — контейнер чата. Чат будет организован во вкладках с классической разметкой 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>

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

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

Есть идеи ?


jquery-ui xmpp backbone.js underscore.js strophe
person Julien Guigner    schedule 25.09.2011    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Используйте маршрутизатор.

Создайте класс 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". Я обсужу это позже.

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

    '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, поддерживаемого представлением, но это довольно просто. Вам придется написать отдельный шаблон для ваших объектов вкладок, чтобы создать объекты DOM вкладок с идентификаторами, которые содержат ваш chatid slug, но это легко управляемо.

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

person Elf Sternberg    schedule 26.09.2011
comment
Упс, забыл ответить. Спасибо мне очень помогло ;) - person Julien Guigner; 05.10.2011
comment
Позже это было усовершенствовано, так что маршрутизатор делает «изменение представления» событием, а TabsView обновляется, получая событие с именем нового представления, и автоматически перерисовывает себя. Это снимает ответственность с родительского представления, тем самым уменьшая его размер и делая будущие изменения в вашей схеме навигации независимыми от будущих изменений в вашей схеме отображения представления. - person Elf Sternberg; 17.07.2012