These are chat archives for ThoughtWorksInc/Binding.scala

23rd
Jan 2017
Jordan Gwyn
@emanresusername
Jan 23 2017 00:24
is there an annotation like @dom but that will convert from a scala.xml.Elem to a org.scalajs.dom.raw.Node (instead of a Binding[org.scalajs.dom.raw.Node])?
i have basically a method where i want to just generate regular elems and add them to a container elem elem.appendChild when an associated Var changes
杨博 (Yang Bo)
@Atry
Jan 23 2017 00:29
So you are looking for a feature in Binding.scala and you expect the feature does not perform data-binding.
Jordan Gwyn
@emanresusername
Jan 23 2017 00:55
i’m not totally sure, this is all still pretty new to me.
I think what i’m looking for is whatever magic goes into converting the native scala xml literals to scalajs nodes.
I imagine there’s some component in the internals that’s doing that already?
杨博 (Yang Bo)
@Atry
Jan 23 2017 00:58
The converter works with data-binding.
Jordan Gwyn
@emanresusername
Jan 23 2017 00:58

so like here where it says

 * The `@dom` annotations enable two magics:
 *  1. XHTML literals to create DOM nodes
 *  2. `xxx.bind` syntax, which makes this DOM tree keep updated whenever `xxx` changes.

is there a way to just get 1 without 2?

杨博 (Yang Bo)
@Atry
Jan 23 2017 01:01
Not yet
You can try to implement it
Jordan Gwyn
@emanresusername
Jan 23 2017 01:03
cool, thanks! still new to this, might find a different/better pattern that gets around this
Jordan Gwyn
@emanresusername
Jan 23 2017 01:20
unrelated, is there anything for auto updating Vars in input elements
something like
val volumeSetting = Var(5)
@dom def autoVolumeInput = {
<input value={volumeSetting.bind}/>
}
// instead of
@dom def manualVolumeInput = {
<input value={volumeSetting.bind} onchange={e: Event => volumeSetting := e.currentTarget.value} />
}
杨博 (Yang Bo)
@Atry
Jan 23 2017 03:43
You can create a createEventHandler method, then use it
<input value={volumeSetting.bind} onchange={createEventHandler(volumeSetting)} />
Jordan Gwyn
@emanresusername
Jan 23 2017 04:21
cool, yeah i ended up with something like this
  @dom
  def inputElem[V](value: Var[V], deserializeValue: StringV, serializeValue: VString = {v: V ⇒ v.toString}): Binding[HTMLInputElement] = {
    <input
    value={serializeValue(value.bind)}
    onchange={inputEventHandler { input ⇒
                value := deserializeValue(input.value)
              } }
      ></input>
  }

  @dom
  def intInputElem(value: Var[Int]): Binding[HTMLInputElement] = {
    inputElem(value, _.toInt).bind
  }
then i wanted to be able to set durations which got a little harder
  val DurationRegex = """\s*(\d+)\s*(\w+)\s*""".r
  def durationFromString(string: String): FiniteDuration = {
    string match {
      case DurationRegex(length, unit) ⇒
        Duration(length.toLong, unit)
    }
  }

  @dom
  def durationInputElem(value: Var[FiniteDuration]): Binding[HTMLInputElement] = {
    inputElem[FiniteDuration](value, durationFromString).bind
  }
sharing here in case there’s any obvious redflags with that approach
杨博 (Yang Bo)
@Atry
Jan 23 2017 04:29
You can remove @dom and .bind for intInputElem
Jordan Gwyn
@emanresusername
Jan 23 2017 04:47
cool, thanks
Jordan Gwyn
@emanresusername
Jan 23 2017 05:17
i noticed in this example the interval is set in the top level object body and never changes
i was trying to set it inside a @dom annotated method and clear out the old interval and set a new one when a certain HTMLInputElement onchange happens but it it doesn’t seem to be working is that a known issue or is there a better way to do this pattern?
(that’s what i was hoping to use the duration input field above to do)
杨博 (Yang Bo)
@Atry
Jan 23 2017 05:23
I suggest you have a look at https://stackoverflow.com/help/how-to-ask and ask it on stackoverflow
Jordan Gwyn
@emanresusername
Jan 23 2017 05:29
haha sorry, thinking outloud too much i guess :sweat_smile: sorry for
spamming ya
杨博 (Yang Bo)
@Atry
Jan 23 2017 05:33
Never mind. ScalaFiddle is a good website and you may want to use it.
Jordan Gwyn
@emanresusername
Jan 23 2017 05:35
:thumbsup: thanks again
jfilali
@jfilali
Jan 23 2017 22:20
There is this new trend to use mobx.js.org with react in order to emulate reactive streaming. Basically redux getting less popular . It pretty funny because for the most majority of CRUD application, redux is overkill. Finally a more simple approach using reactive stream like Binding is more scalable than the hype of react/redux and this have been going on for years. I pretty sure that sometime soon people will use Mobx.js without react because the shadow dom will become useless . but there is already so many scala-js library that does that .