如何用Binding.scala声明嵌入式css

Question

我尝试用Binding.scala声明一些嵌入的css。

import com.thoughtworks.binding._, Binding._
import org.scalajs.dom._

@dom def css = <style>
  body {
    background-color: lightblue;
  }
</style>

dom.render(document.head, css)

但是，我收到了错误消息：

ScalaFiddle.scala:6: error: not found: type lightblue
      background-color: lightblue;
                        ^
ScalaFiddle.scala:6: error: not found: value background
      background-color: lightblue;
      ^
ScalaFiddle.scala:6: error: not found: value color
      background-color: lightblue;
                 ^

我怎么才能修好它？

Answer 1

您可以看到错误消息，因为{是Scala的XML文字中的一个特殊字符。

在CDATA元素中使用style部分。

@dom def css = <style>
  <![CDATA[
    body {
      background-color: lightblue;
    }
  ]]>
</style>

{在CDATA部分不再具有特殊意义。

注意，这种CDATA方法仅在coalescing标志打开时才能工作。如果意外地关闭了标志，请参见https://github.com/ThoughtWorksInc/Binding.scala/issues/30和https://github.com/ThoughtWorksInc/Binding.scala/issues/58。

Answer 2

杨波的回答是：

@dom def css = <style>
  <![CDATA[
    body {
      background-color: lightblue;
    }
  ]]>
</style>

给了我一个例外：

ScalaFiddle.scala:22: error: overloaded method value domBindingSeq with alternatives:
  ( text: String)binding.this.Binding.Constants[raw.this.Text] 
...

请参阅https://scalafiddle.io/sf/ATMVpjV/0

这解决了这个问题：

  @dom def css = <style>
  {"""
    body {
      background-color: lightblue;
    }
    """
  }
</style>

请参阅https://scalafiddle.io/sf/ATMVpjV/1