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

How can I init the canvas with some chart library like chartjs when it is loaded to dom ?

Yang Bo
  • 3,586
  • 3
  • 22
  • 35
jilen
  • 5,633
  • 3
  • 35
  • 84
  • You may have a look at code from other guys who use Binding.scala with d3.js https://github.com/emanresusername/word-cloud-generator/blob/master/ui/src/main/scala/my/will/be/done/wordcloud/component/WordcloudComponent.scala – Yang Bo Jul 06 '17 at 07:38
  • @YangBo I don't think that code resolve my issue. Look at the example, if the `show` changes I need to redraw the chart. So I think it cloud be done with binding.scala 's event listener. – jilen Jul 06 '17 at 08:23
  • Try put those redraw code in `if` block – Yang Bo Jul 06 '17 at 08:29
  • @YangBo That probably not work, because the element was not loaded to dom when those code executes. – jilen Jul 06 '17 at 08:31
  • Then you need custom MountPoint – Yang Bo Jul 06 '17 at 11:05
  • @YangBo Is there any example here ? – jilen Jul 07 '17 at 00:58
  • https://github.com/ThoughtWorksInc/Binding.scala/search?utf8=%E2%9C%93&q=SingleMountPoint&type= – Yang Bo Jul 07 '17 at 07:16
  • Is there some code you can point us to, where a custom MountPoint is used? I would be interested in a solution, too, but am not getting what to do from the code... Thanx! – jens Jul 13 '17 at 20:11
  • @jens Finally I use [Mutation Observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to watch element mounting. – jilen Jul 14 '17 at 01:40
  • @jilen: Thanx. Went with the MutationObserver, too. Works great. – jens Jul 14 '17 at 13:45

1 Answers1

4

Solution 1

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

Solution 2

You can create a custom SingleMountPoint, and put the initialization code in the overriden mount method:

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
Yang Bo
  • 3,586
  • 3
  • 22
  • 35