Binding.scala:更新值时如何调用副作用？

Question

我的应用程序中有一个地理坐标列表，存储在一个Vars[Coordinates]中。现在，我希望在地图上显示这些内容，并在向列表中添加或删除新坐标时自动更新地图。我使用一个公开API的库在地图上添加和删除标记，所以我想在更新列表时调用这些标记，但是我找不到任何明显的方法。对于如何做到这一点，有什么建议吗？

编辑:谢谢杨波的回复！最后我得到了这样的结果：

val coordinates = Vars.empty[Coordinates]
def mapMountPoint(parent: Element, coordinates: BindingSeq[Coordinates]) =
  new MultiMountPoint[Coordinates](coordinates) {
    … // method overrides here to create the map in parent
  }
@dom 
def map = {
  val e = <div></div>
  mapMountPoint(e, coordinates).bind
  e
}

它似乎可以在呈现或从DOM…中删除div时调用挂载和卸载方法。但这真的是该怎么做的吗？它看起来有点奇怪，我还会收到一个编译器警告，我在这里调用.bind：a pure expression does nothing in statement position; multiline expressions might require enclosing parentheses。

在monadic-html库中，有一种非常优雅的方法：

<canvas mhtml-onmount={ e => crazyCanvasStuff(e) }></canvas>

还有一个匹配的mhtml-onun挂载属性来进行清理。

Answer 1

您可能希望创建自己的MultiMountPoint，它覆盖splice和set方法。

然后将挂载点注入呈现过程，类似于https://stackoverflow.com/a/45101054/955091。

与Haskell不同，您可以在Scala中到处执行副作用，甚至在HTML模板中也是如此。如果您编写了类似于<canvas id="my_canvas" data:dummy_attribute={ crazyCanvasStuff(my_canvas, coordinates.all.bind); "dummy_value" }></canvas>的东西，那么它也应该能工作。

但是，执行副作用的其他解决方案是而不是推荐的，因为它们的行为依赖于Binding.scala的内部实现。例如，当Binding.scala运行时查找上游数据不变(Binding.scala路由器)时，可能不会重新评估副作用。使用挂载点是执行副作用的唯一正确方法，特别是在需要部分更新或希望管理呈现期间创建的自定义对象的生命周期时。

Answer 2

我使用https://github.com/rtimush/scalatags-rx

build.sbt: libraryDependencies += "com.timushev“%%

例句:如果按下按钮，就会出现偶数颜色，使用刻度.

var colorActiv = "green"
var colorInActiv = "black"

val buttonDateColor = Var(colorInActiv) // big V in Var
val buttonDateRx = Rx(buttonDateColor())

..。

def buttonDateOnclick(): Unit = {
    if (buttonDateColor.now == colorInActiv){
        buttonDateColor() = colorActiv
    } else {
        buttonDateColor() = colorInActiv
    }
}

.在Menubuttons对象中：

var menuButtons =
div(
    button(
        menubuttonClass,
        color := buttonDateRx,
        onclick := buttonDateOnclick _,
        "button-text"
    )

..。在main/initialize()中：

dom.document.getElementById("buttonsdiv").appendChild(Menubuttons.menuButtons.render)