我目前正在使用 strope.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 和下划线相当陌生,我想知道处理这个问题的最佳方法是什么。我从聊天模型、聊天集合、聊天 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 之外,但这非常简单。您必须为选项卡对象编写一个单独的模板,以创建带有包含 chatid
slug 的 ID 的选项卡 DOM 对象,但这很容易管理。
我写了一篇关于这种单页设计的教程:The Backbone Store (链接转到 Javascript 版本,尽管我现在是一名 CoffeeScript 拥护者),我还讨论了使用此技术来查找和修改基于 slug 的导航辅助工具,例如选项卡、面包屑等。
关于jquery-ui - 使用 Backbone.js 和 underscore.js 渲染选项卡 (jquery ui),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7545858/