如何通过特定选择来组织 Backbone 集合？

我有一系列物品。我想跟踪当前的选择。当用户单击集合中的不同项目时，我想指示该项目已被选中并显示所选项目的详细信息。将此视为具有详细视图的列表（就像典型的电子邮件客户端）。

Example of a master-detail layout (source https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/CocoaBindings/Tasks/masterdetail.html):

我目前有类似的东西（用 CoffeeScript 编写，模板使用火腿咖啡 https://github.com/netzpirat/haml-coffee/):

class Collections.Items extends Backbone.Collection
  model: Models.Item

  setCurrentSelection: (id)->
    # what to do here? Is this even the right way to do it?

  getCurrentSelection: ->
    # what to do here? Is this even the right way to do it?

class Views.ItemsPage extends Backbone.View

  list_template: JST['items/list']
  details_template: JST['items/details']

  events:
    'click .item': 'updateSelection'

  initialize: (options)->
    @collection = options.collection

  render: ->
    $('#items_list').html(@list_template(collection: @collection.toJSON())) # not sure if this is how to render a collection
    $('#item_details').html(@details_template(item: @collection.currentSelection().toJSON())) # how to implement currentSelection?
    @

  updateSelection: (event)->
    event.preventDefault()
    item_id = $(event.currentTarget).data('id')
    # mark the item as selected
    # re-render using the new selection

# templates/items/list.hamlc
%ul
  - for item in @collection
    %li{data:{id: item.id}, class: ('selected' if item.selected?)} # TODO: How to check if selected?
      = item.name

# templates/items/details.hamlc
%h2= @item.name

我不确定我是否在关注你（我的 CoffeeScript 有点生疏），但我认为你想要做的是设置一个selected您的适当模型上的属性updateSelection方法，然后重新渲染您的视图。

换句话说：

updateSelection: (event)->
    event.preventDefault()
    item_id = $(event.currentTarget).data('id')
    model = this.collection.get(item_id) # get the model to select
    model.selected = true # mark the item as selected
    this.render() # re-render using the new selection