如何使用Binding.scala呈现api请求的json结果

Question

我尝试使用以下代码将json呈现为dom，但失败了

       <div class="row">
        {val result = FutureBinding(ApiHomeProjectsGet.request())
      result.bind match {
        case None => <div>Loading...</div>
        case Some(Success(ApiHomeProjectsGetResponse200(projects))) =>     {
          for (project <- projects.items) yield <p> {project.title} </p>
        }
        case e => <div>Error</div>
      }}
      </div>

项目被定义为案例类。

case class Projects(items: ArrayBuffer[Project])

编译器报告错误：

overloaded method value domBindingSeq with alternatives:
[error]   (text: String)com.thoughtworks.binding.Binding.Constants[org.scalajs.dom.raw.Text] <and>
[error]   (node: org.scalajs.dom.raw.Node)com.thoughtworks.binding.Binding.Constants[org.scalajs.dom.raw.Node] <and>
[error]   (seq: Seq[org.scalajs.dom.raw.Node])com.thoughtworks.binding.Binding.Constants[org.scalajs.dom.raw.Node] <and>
[error]   (bindingSeq: com.thoughtworks.binding.Binding.BindingSeq[org.scalajs.dom.raw.Node])com.thoughtworks.binding.Binding.BindingSeq[org.scalajs.dom.raw.Node]
[error]  cannot be applied to (Object)
[error]           <div class="row">
[error]            ^
[error] one error found

如何使用for(.)将从api请求到dom的json数据呈现产量模式？

最佳解决方案

     case Some(Success(ApiHomeProjectsGetResponse200(projects))) =>
        <div class="row">
          {Constants[Project](projects.items:_*).map(item => <p> {item.title} </p>)}
        </div>

Answer 1

根据您对Projects的定义，projects.items是ArrayBuffer[Project]类型。为了理解map，结果是ArrayBuffer[dom.raw.Node]类型。

在模式匹配表达式中，您将dom.raw.Node和ArrayBuffer[dom.raw.Node]混合在一起，这两种类型的最小上限是Object，这就是它在错误消息中弹出的原因。

解决此问题的一种方法是在模式匹配的每个分支中返回一个dom.raw.Node，例如：

case ... =>
  <div>
    (for (project <- projects.items) yield <p> {project.title} </p>).toSeq
  </div>

Answer 2

现在，我可以使用呈现函数来解决这个问题。

          case Some(Success(ApiHomeProjectsGetResponse200(projects))) =>
          val projectsBinding = Vars[Project](projects.items:_*)
          <div>
             { renderProjectPanel(projectsBinding).bind}
          </div>

          @dom def renderProjectPanel(items: Vars[Project]) = {
              for (project <- items) yield <p>{project.title}</p>
          }

尽管这需要添加更多的代码，但它可以工作。

希望有人能给出更简单的解决方案