2017-07-05 26 views
1
@dom 
def chart(show: Var[Boolean]) = { 
    if(show.bind) { 
    <canvas id="chartCanvas"><canvas> 
    } 
} 

如何在啓動畫布時使用一些圖表庫,如chartjs將它加載到dom時?如何在元素加載到dom後執行一些init Binding.scala

+0

你可能有一個看看使用Binding.scala與d3.js https:// githu的其他人的代碼b.com/emanresusername/word-cloud-generator/blob/master/ui/src/main/scala/my/will/be/done/wordcloud/component/WordcloudComponent.scala –

+0

@YangBo我不認爲代碼解決我的問題。看看這個例子,如果'show'發生變化,我需要重繪圖表。所以我認爲雲可以通過binding.scala的事件監聽器來完成。 – jilen

+0

嘗試將這些重繪代碼放在if區塊中 –

回答

3

解決方案1 ​​

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

解決方案2

您可以創建自定義SingleMountPoint,並把初始化代碼的重寫mount方法:

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

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

謝謝。這爲我補充了缺失的部分。 – jens

相關問題