如何在使用 Binding.scala 将元素加载到 dom 后执行一些初始化答案

【问题标题】：How to execute some init after element loaded to dom with Binding.scala如何在使用 Binding.scala 将元素加载到 dom 后执行一些初始化
【发布时间】：2017-12-08 15:01:45
【问题描述】：

@dom 
def chart(show: Var[Boolean]) = {
  if(show.bind) {
    <canvas id="chartCanvas"><canvas>
  }
}

当画布加载到 dom 时，如何使用 chartjs 之类的图表库来初始化画布？

【问题讨论】：

你可以看看其他使用 Binding.scala 和 d3.js 的人的代码 github.com/emanresusername/word-cloud-generator/blob/master/ui/…
@YangBo 我不认为该代码解决了我的问题。看示例，如果show 发生变化我需要重新绘制图表。所以我认为它可以通过 binding.scala 的事件监听器来完成。
尝试将那些重绘代码放在if块中
@YangBo 这可能行不通，因为执行这些代码时元素没有加载到 dom。
那你需要自定义 MountPoint

标签： scala.js binding.scala

【解决方案1】：

解决方案 1

@dom 
def chart(show: Var[Boolean]) = {
  if(show.bind) {
    val myCanvas = <canvas id="chartCanvas"><canvas>
    myInitializationCode(myCanvas)
    myCanvas
  } else {
    <!-- don't show canvas -->
  }
}

解决方案 2

您可以创建一个自定义SingleMountPoint，并将初始化代码放在覆盖的mount方法中：

val yourCustomMountPoint = new SingleMountPoint[Boolean](show) {
  override def mount() = {
    super.mount()
    // Your custom initialization code
  }
  override def unmount() = {
    // Your custom clean up code
    super.unmount()
  }
  override def set(newValue: Boolean) = {
    // Your custom handler when `show` get changed
  }
}

// Inject your custom mount point into the rendering process
yourCustomMountPoint.bind

【讨论】：

谢谢。这为我增加了缺失的部分。