当 Var 更改时，我的输入 html 表单丢失 focus/empties

Question

我想从 Binding.scala 中创建一些 UI。 UI 包含一个文本框。当用户在文本框中键入文本时，我想根据用户输入更改背景颜色。

import com.thoughtworks.binding._, Binding._
import org.scalajs.dom._

@dom def render = {
  val color = Var("")
  val styleText: String = s"background-color: ${color.bind}"

  // <div> and <input> will be recreated once data changes.
  <div style={styleText}>
    <input id="myInput" type="text" oninput={ _: Any => color := myInput.value }/>
  </div>
}

dom.render(document.body, render)

该示例在 ScalaFiddle.

上运行

但是，当我在文本框中输入内容时，文本框失去焦点并且仍然是空的。

我该如何解决？

Answer 1

也许您在同一个 @dom 方法中定义了 <input ...> 和 .bind，而 <input ...> 在 .bind 之后。尝试将 .bind 和 <input ...> 重构为单独的 @dom 方法或让 .bind 表达式嵌套在另一个 DOM.

中

比如myInput写在.bind之前，就不会重新创建：

import com.thoughtworks.binding._, Binding._
import org.scalajs.dom._

@dom def render = {
  val color = Var("")
  val myInput = <input id="myInput" type="text" oninput={ _: Any => color := myInput.value }/>
  val styleText: String = s"background-color: ${color.bind}"

  // <div> will be recreated once data changes.
  // <input> will not be recreated.
  <div style={styleText}>
    {myInput}
  </div>
}

dom.render(document.body, render)

以上示例在 ScalaFiddle.

上运行

如果 .bind 表达式嵌入到 XHTML 文字中，则不会影响其子项：

import com.thoughtworks.binding._, Binding._
import org.scalajs.dom._

@dom def render = {
  val color = Var("")

  // <div> and <input> will not be recreated when data changes.
  // Only the class attribute will be changed.
  <div style={s"background-color: ${color.bind}"}>
    <input id="myInput" type="text" oninput={ _: Any => color := myInput.value }/>
  </div>
}

dom.render(document.body, render)

以上示例在 ScalaFiddle.

上运行

另一种方法是将 .bind 表达式包装在 @dom val:

中

import com.thoughtworks.binding._, Binding._
import org.scalajs.dom._

@dom def render = {
  val color = Var("")
  @dom val styleText: Binding[String] = s"background-color: ${color.bind}"

  // <div> and <input> will not be recreated when data changes.
  // Only the class attribute will be changed.
  <div style={styleText.bind}>
    <input id="myInput" type="text" oninput={ _: Any => color := myInput.value }/>
  </div>
}

dom.render(document.body, render)

以上示例在 ScalaFiddle.

上运行

当 Var 更改时，我的输入 html 表单丢失 focus/empties

My input html forms misses focus/empties when a Var changes

dom

data-binding

scala.js

lost-focus

binding.scala