Question

我正在玩strophe.js，backbone.js＆amp; wijmo（基于jquery UI的UI库）和聊天界面。我有两个对话框，一个是联系人列表，另一个是聊天容器。聊天将在带有经典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＆amp; amp;强调，我想知道处理这个问题的最佳方法是什么。我开始使用聊天模型，聊天集合，聊天视图和聊天列表视图，但我找不到正确的方法来呈现标签并保持更新。

有什么想法吗？

Answer 1

使用路由器。

为聊天创建一个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()

这是视图中的内容。每个视图都有一个slugified名称。注意使用“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())

当然，您可以进一步概括这一点，但我们的想法是，无论何时切换标签，您只需切换一个方法来隐藏所有可见的内容，然后（Deferred确保以正确的顺序发生这种情况）显示一个事情不是。选项卡由每个视图维护;你将不得不做一点点，因为它们可能超出View维护的实际DIV，但这很简单。您必须为选项卡对象编写单独的模板，以创建包含chatid slug的ID的选项卡DOM对象，但这很容易管理。

我写了一篇关于这种单页设计的教程：The Backbone Store（链接转到Javascript版本，虽然我现在是一个coffeescript党派），我还讨论了使用这种技术来查找和修改基于slug的导航辅助工具，例如制表符，面包屑等。

使用Backbone.js＆amp;渲染标签（jquery ui） underscore.js

1 个答案: