javascript - 使用 Bacon.js 在容器中列出

Question

我有一个元素列表和一个列表容器。 (它们是通过 Marionette + Backbone View 实现的)。

我想做的是注册对列表的点击并将其发送到带有 bacon.js 或类似内容的容器。

这相当容易，例如: this.selected = this.$el.asEventStream('click').map(this);，以便我可以突出显示所选项目。

现在的问题是，一旦选择了另一个元素，就必须取消选择旧的元素，我不确定这里使用什么策略。

我不想改变容器中的列表。

编辑以澄清:

我现在的代码在这里:

https://github.com/archaeron/Marionette.CompoundView

我仍然在传统事件中这样做，但我想尝试另一种方式。

Answer 1

我不知道如何使用 Backbone 正确实现它，但是单独使用 Bacon 我会做这样的事情:

$container = $('.container')

itemClicks = $container.asEventStream('click', '.item').map (event) ->
  $(event.target)

nonContainerClicks = $(document).asEventStream('click').filter (event) ->
  not $.contains($container.get(0), event.target)

selectedItem = Bacon.mergeAll(
  itemClicks,
  nonContainerClicks.map(-> null)
).toProperty(null)

selectedItem.onValue (itemEl) ->
  $('.container').find('.item.selected').removeClass('selected')
  if itemEl isnt null
    itemEl.addClass('selected')

不确定它是否有帮助，但可能至少会给你一些想法。