如何在 Binding.scala 中使用模式匹配？答案

【问题标题】：How to use pattern matching in Binding.scala?如何在 Binding.scala 中使用模式匹配？
【发布时间】：2017-11-28 01:30:40
【问题描述】：

我有以下型号：

case class CarBinding(ownerId: Var[String], specs: Var[Option[Specs]])

Specs 是一个特征，具有以下具体类型：

trait Specs {

    def name: String

}

case class SportsCarSpecs(name: String, details: Details) extends Specs

在我的 Scala.js 应用程序中，我现在想创建一个表格并列出所有条目：

@dom
  def buildTable(): Binding[BindingSeq[Node]] = {
    val data = Vars.empty[CarBinding]
    /* Initial population. */
    // Some code...
      <br/>
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th class="col-md-1">
                <small>Owner ID</small>
              </th>
              <th class="col-md-1">
                <small>Specs</small>
              </th>
            </tr>
          </thead>
          <tbody>
            {for (entry <- data) yield {
            <tr>
              <td>
                <small>
                  {entry.ownerId.bind}
                </small>
              </td>
              <td>
                <small>
                  {entry.specs.bind match {
                  case Some(SportsCarSpecs(name, details)) => {name} <span>{details.ps}</span>
                  case _ => -
                }}
                </small>
              </td>
            </tr>
          }}
          </tbody>
        </table>
      </div>
  }

但是，我收到以下错误：

 ';' expected but $XMLSTART$< found.
[error]                   case Some(SportsCarSpecs(name, details)) => {name} <span>{details.ps}</span>

我做错了什么？

【问题讨论】：

标签： scala scala.js binding.scala

【解决方案1】：

这个：

entry.specs.bind match {
  case Some(SportsCarSpecs(name, details)) => {name} <span>{details.ps}</span>
  case _ => -
}

不是一个有效的表达式，因此您不能在 XML 文字中插入它。如果您在两个分支中都有完整的 XML 表达式，它应该可以工作。所以我能看到的最简单的解决方法是将<small> 拉到里面：

          <td>
            {entry.specs.bind match {
              case Some(SportsCarSpecs(name, details)) => <small>{name} <span>{details.ps}</span></small>
              case _ => <small>-</small>
            }}
          </td>

【讨论】：