如何使用 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>

projects 被定义为一个案例类

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(...) yield 模式将 api 请求中的 json 数据渲染到 dom？

---

最佳解决方案

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

Answer 1

目前，我可以使用渲染函数来解决这个问题

          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>
          }

尽管这需要添加更多代码，但它确实有效

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

Answer 2

根据您对Projects 的定义，projects.items 的类型为ArrayBuffer[Project]。你的 for 理解去糖到 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>