使用Backbone.js和underscore.js呈现选项卡(jquery ui)
我目前正在使用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 &Under线的新手，我想知道处理这个问题的最好方法是什么。我从一个聊天模型，一个聊天集合，一个聊天视图和一个聊天列表视图开始，但我没有找到一种适当的方法来呈现选项卡并使其保持更新。
有什么想法吗？
回答 1
Stack Overflow用户
发布于 2011-09-27 04:39:07
使用路由器。
创建聊天的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())当然，您可以进一步推广这一点，但其思想是，无论何时切换选项卡，您只需切换一个方法来隐藏所有可见的内容，然后(延迟确保以正确的顺序发生)显示一个不可见的内容。选项卡是由每个视图维护的；您必须做一些微调，因为它们可能在View维护的实际DIV之外，但这非常简单。您必须为选项卡对象编写一个单独的模板，以便使用包含chatid插件的ID创建选项卡DOM对象，但这很容易管理。
我写了一篇关于这种单页面设计的教程：The Backbone Store (链接指向Javascript版本，尽管我现在是coffeescript的拥护者)，在那里我还讨论了使用这种技术来查找和修改基于插件的导航辅助工具，如选项卡、面包屑等。
https://stackoverflow.com/questions/7545858
复制相似问题
腾讯云开发者
