2

我尝试使用以下代码将 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(...) yield 模式将 json 数据从 api 请求渲染到 dom？

最佳解决方案

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

2 回答 2

1

根据你的定义Projects，projects.items是类型ArrayBuffer[Project]。你的理解去糖了map，结果就是类型ArrayBuffer[dom.raw.Node]。

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

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

case ... =>
  <div>
    (for (project <- projects.items) yield <p> {project.title} </p>).toSeq
  </div>
于 2017-03-20T15:25:54.350 回答
0

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

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

即使这需要添加更多代码，但它可以工作

希望有人能提供一个更简单的解决方案

于 2017-03-21T02:31:30.180 回答