jquery-ui - 使用 Backbone.js 和 underscore.js 渲染标签(jquery ui)

原文 标签 jquery-ui xmpp backbone.js underscore.js strophe

我目前正在使用 strophe.js、backbone.js 和 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 和 underscore 的新手,我想知道处理这个问题的最佳方法是什么。我从一个聊天模型、一个聊天集合、一个聊天 View 和一个聊天 ListView 开始,但我找不到合适的方法来呈现选项卡并使其保持更新。

有任何想法吗 ?

最佳答案

使用路由器。

为聊天创建一个 View 类。每个聊天都会有自己的 View 和自己的选项卡。更新时, 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()

这就是 View 中的内容。每个 View 都有一个 slugified 名称。请注意 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())

当然,您可以进一步概括这一点,但想法是,每当您切换选项卡时,您只需切换一个方法来隐藏所有可见的内容,然后(延迟确保这以正确的顺序发生)显示一件事不是.选项卡由每个 View 维护;您将不得不做一些尝试,因为它们可能会在 View 维护的实际 DIV 之外,但这很简单。您必须为您的选项卡对象编写一个单独的模板,以创建 ID 包含您的 chatid 的选项卡 DOM 对象。蛞蝓,但这很容易管理。

我写了一篇关于这种单页设计的教程:The Backbone Store (链接到 Javascript 版本,尽管这些天我是一名 CoffeeScript 党派),在那里我还讨论了使用这种技术来查找和修改基于 slug 的导航辅助工具,例如选项卡、面包屑等。

关于jquery-ui - 使用 Backbone.js 和 underscore.js 渲染标签(jquery ui),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7545858/

相关文章:

javascript - 通过php加载时,jQuery UI无法检测CSS样式

jquery - MultiDatespicker : exclude weekends from pickableRange and adjustRangeToDisabled

javascript - jQuery Mobile弹出窗口未使用requireJS和bonesJS触发

jQuery ajaxOptions -error 有效,为什么不成功?

jquery - jQuery UI 对话框内的 iframe 中的访问元素

javascript - 在 Converse JS 和 Openfire Server 之间创建持久连接

ios - XMPPframewok 与 openfire

xmpp - "Voting"XMPP 协议(protocol)的机制

javascript - 指定/更改 Backbone 集合的端口以指向 couchdb 服务器

html - Rails Backbone Marionette Assets 在更改时不再更新?