关于binding.scala中一些注意事项

最新推荐文章于 2022-09-22 10:35:45 发布

qq_41617659

最新推荐文章于 2022-09-22 10:35:45 发布

阅读量202

点赞数

分类专栏： scalajs scala

本文链接：https://blog.csdn.net/qq_41617659/article/details/115400499

版权

scalajs 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

scala

3 篇文章 0 订阅

订阅专栏

关于binding.scala中一些注意事项

本文会持续更新

binding.scala不支持

仅支持常规组件的 callback 函数和 attribute属性，对于自定义的属性可以使用 “data:” 标识，则binding.scala可是实现支持，对于callback函数目前暂无拓展方案，目前看来需要进行二次开发才可实现对新的callback的支持。
attribute扩展举例

val myDiv = <div data:customAttributeName="attributeValue"></div>

for yield 仅支持 Vars类型，支持嵌套的 for yield，但yield 返回不能为序列node（即必须为单个dom元素）。
新版的@dom已经移除，必须使用最新的@html，最简单的实例

import com.thoughtworks.binding.Binding.Var
import org.lrng.binding.html
import org.scalajs.dom.html.Input
import org.scalajs.dom.raw.Event


object ComponentConfigInput {

  @html
  def render(nameTuple2: Tuple2[String, String], input1: Var[String] =Var(""), input2: Var[String]=Var("")) = {
    <div class="ui two column stackable grid">
      <div class="column">
        <div class="ui fluid left labeled input">
          <a class="ui label">
            {nameTuple2._1}
          </a>
          <input type="text" placeholder={nameTuple2._1} onchange={event: Event => input1.value = event.currentTarget.asInstanceOf[Input].value}/>

          </div>
      </div>
      <div class="column">
        <div class="ui fluid left labeled input">
          <a class="ui label">
            {nameTuple2._2}
          </a>
          <input type="text" placeholder={nameTuple2._2} onchange={event: Event => input2.value = event.currentTarget.asInstanceOf[Input].value}/>
        </div>
      </div>
    </div>
  }
}

本代码实例中使用的UI为Fomantic UI

关于bind的理解，所谓bind，及代表相关值更新后，{xx.bind }后的代码均会重新执行，其中Var的常规用法事，Var("").bind, 而对于Vars("")的常规绑定用法则是 for yield表达式。
根据现象来看，bind判定变化并不依据实例是否同一个，而是依赖值进行判定
if 表达式输出结果如果是 node，必须存在else，及整个表示结果必须有输出且不为Nothing
使用中发现一次if 表达式失效的情况，切换为 match case ture/false后可行，原因咱不明确
关于循环和嵌套循环

 @html
  def crossTr(sigResult: SignalParseResult) = {
    val crossId = sigResult.crossId
    val totalNum = sigResult.number.values.sum.toDouble
    <tr>
      <td>{crossId.toString}</td>
      {
      for (state <- Vars("miss", "offline", "uncontrollable", "normal")) yield {
        <td>
          {s"${sigResult.number(state)}(${if (totalNum == 0) 0 else (sigResult.number(state) / totalNum * 100).formatted("%.2f")}%)"}
        </td>
      }
      }
      <td>
        {val state = "total"
      s"${totalNum}"}
      </td>
    </tr>
  }

  @html
  def render(crossIdsSignalResult: Vars[SignalParseResult] = Vars.empty[SignalParseResult]) = {
    <div>
      <table class="ui padded table">
        <thead>
          <tr>
            <th>cross_id</th>
            <th>miss</th>
            <th>offline</th>
            <th>uncontrollable</th>
            <th>normal</th>
            <th>total</th>
          </tr>
        </thead>
        <tbody>
          {
            for (sigResult <- crossIdsSignalResult) yield {
              crossTr(sigResult).bind
            }
          }
        </tbody>
      </table>
    </div>
  }