FRP、角度和全局事件处理程序

Question

我刚开始使用Bacon.js，它真的很棒。尽管有时我确实很难找到正确的做事方式。例如，我想要一个带有可拖动部分的角度指令。我无耻地选择了某人的jsBin 并尝试将该代码改编为 angular

我正在尝试制作一个包含可调整大小列的表格。所以如果我做这样的事情 在列标题指令中

link: (scope, element, attrs)->
    el = element.find('.column-separator')
    doc = $(document)
    mMove = doc.asEventStream('mousemove')
    startDrag = el.asEventStream('mousedown')
    endDrag = doc.asEventStream('mouseup').takeWhile mMove

    # in this case unlike the example in jsBin I don't care about vertical axis, 
    # only horizontal "X"
    getDelta = (t)-> a = t[1]; b = t[0]; return a-b   

    add = (p1,p2)-> p1 + p2

    draggingDeltas = startDrag.flatMap ->
        return mMove
                .map '.clientX'
                .slidingWindow 2,2
                .map getDelta
                .takeUntil endDrag

    pos = draggingDeltas.scan 0, add
    pos.onValue (pos)-> el.css left: pos+"px"

这有点工作，但现在这个指令将在整个页面上注册“mousemove”和“mouseup”事件。我可能可以添加一些takeWhile 语句，事实上我只是尝试过并没有真正起作用。

我的意思是在 Angular 应用程序中使用像 $(document).asEventStream('click') 这样的全局事件处理程序的模式是什么？

• 您可以在指令中创建处理程序，然后使用takeWhile, takeUntil，但这只会工作一次，因为流最终会停止。每次需要回复document.click 时都需要重新初始化流吗？ 在一堆地方有“文档”级别的事件不是一件坏事吗？如果您编写指令$(document).asEventStream('mouseup') 并使用该指令两百次，那不会创建实际的两百个听众吗？

• 或者您必须在全局范围内引入这些流变量以供整个应用程序使用，然后在指令中执行map、filter 和reduce？但是如果有人打电话给takeUntil 并且流完全停止流动并且不能在应用程序的其他部分使用怎么办？

• 或者可能在应用程序的顶层监听并为流中的每个值发出 $rootScope 事件，然后在指令或视图中使用ng-bacon's$rootScope.$asEventStream(event)？ 这不会使应用程序的响应速度有所降低吗？说是否需要响应“keydown”和“keyup”事件？

谁能给我一个例子，如何在角度指令中使用 FRP（特别是拖放示例将不胜感激）

Answer 1

我不确定这究竟如何符合 Angular 哲学，但我肯定会只添加一次这些处理程序。

在全局单例类中：

var mouseHandler = {
  up: $(document).asEventStream('mouseup'),
  move: $(document).asEventStream('mousemove')  
} 

在单个组件中，您可以向其中添加处理程序，但请确保始终使用 takeUntil，这样 bacon 只会在实际需要时处理这些事件。

function dragHandler(element) {
  var start = $(element).asEventStream('mousedown')
  var delta = start.flatMap(function() {
    return mouseHandler.move
      .map('.clientX')
      .slidingWindow(2,2)
      .map(getDelta)
      .takeUntil(mouseHandler.up)
  })

  var pos = delta.scan(0, add)
  pos.onValue(function(p) {
    $(element).css({left: p + "px"})
  })

  function getDelta(t) { return t[1]-t[0] }
  function add(a,b) { return a+b }
}

http://jsbin.com/yekojitake/3/edit