Binding.scala使用教程6--自定义样式和属性

控制台打印出来的

目录结构

环境搭建查看 Binding.scala使用教程1–环境搭建

import com.thoughtworks.binding.dom
import java.util.Date
import com.thoughtworks.binding.Binding.Var
import com.thoughtworks.binding.Binding
import scala.scalajs.js.timers.setInterval
import org.scalajs.dom.raw.HTMLButtonElement

object View
{
  @dom def introductionDiv =
  {
  <div style="font-size:0.8em">
    <h3>Binding.scala的优点</h3>
    <ul>
      <li>简单</li>
      <li>概念少<br/>功能多</li>
    </ul>
  </div>
  }

  @dom def typedButton: Binding[HTMLButtonElement] =
  {
  <button>按钮</button>
  }

  @dom def comment =
  {
  <!-- 你看不见我 -->
  }

  @dom def css = <style>
  {
    """
    .highlight {
      background-color: gold;
    }
    """
  }
</style>

  @dom def inlineStyle =
  {

  <section>
    <p class="highlight">Binding.scala真好用！</p>
  </section>
  }

  @dom def randomParagraph =
  {
  <p>生成一个随机数： { math.random.toString }</p>
  }

  @dom def myCustomDiv =
  {
  <div data:customAttributeName="attributeValue"></div>
  }

  val now = Var(new Date)
  setInterval(1000)
  {
    now.value = new Date
  }

  @dom def render =
  {
    <div>
      {css.bind}
      现在时间：{ now.bind.toString }
      { introductionDiv.bind }
      { inlineStyle.bind }
      { typedButton.bind }
      { comment.bind }
      { randomParagraph.bind }
      { myCustomDiv.bind }


    </div>
   }

  @dom val autoPrintln: Binding[Unit] =
  {
    println(render.bind.innerHTML) // 在控制台中打印页面 HTML
  }
  autoPrintln.watch()

}

import scala.scalajs.js.JSApp
import com.thoughtworks.binding.dom
import org.scalajs.dom.document

object MainApp extends JSApp
{
  def main(): Unit =
  {
    println("I am the MainApp")
    dom.render(document.body, View.render)
  }
}