ThoughtWorksInc/Binding.scala

General questions should be asked on StackOverflow, not here. This room focuses on development of Binding.scala.

Kahli Burke

@kahliburke

Yeah that's what I was concerned about too.. One option seemed to put Var.value = inside a Future block

杨博 (Yang Bo)

@Atry

Ok, I'm trying to figure out how to accomplish setting of a Var, say related to a user's choice in UI from some other Binding value that can sometimes change

You can try to not use Var for that case. Use Binding block instead.

Lorenzo Gabriele

@lolgab

Are there plans to support scala native?

杨博 (Yang Bo)

@Atry

Yeah that's what I was concerned about too.. One option seemed to put Var.value = inside a Future block

There is a FutureBinding for remote data. You can use it instead of Vars.

@lolgab It would be not very hard to support scala-native. PR is welcomed.

Kahli Burke

@kahliburke

This isn't for Future data from a call, the Var represents user state in an input element, but some other event happens in a different UI element and I want to respond to that change (via otherComp.bindingProperty.bind) and change the user's selection.

The idea was to use Binding { val store = binding.bind; Future { var.value = store} }.watch to break out of Binding context

杨博 (Yang Bo)

@Atry

It's better to avoid watch...

Kahli Burke

@kahliburke

Yeah it's not my go to approach but I'm trying to figure out how to write a generic input component with Var for its internal state in a way that it can also respond to some external change... seems tricky to do it without var, and how else do I hook up external.bind -> inputelem.value? The other thing I thought of was to completely recreate my input component in response to external change but I was trying to avoid that.

杨博 (Yang Bo)

@Atry

You can create another Binding that merges internal Var and external changes together.

Thinking about the dependency graph. A Var is always the source of the onchange event, not a intermediate node.

Kahli Burke

@kahliburke

Yes the graph makes sense. So my takeaway is that the warning about @dom applies to Binding {} as well, correct? Is the issue around circularity causing 'cycles' where dirty values cause other things to become dirty and we miss rendering properties (like digest cycles in the Angular world), or circularity causing stack overflow or other endless loop problems?

杨博 (Yang Bo)

@Atry

It will never cause stack overflow in Binding.scala. But it will cause some reentry, which Binding.scala did not mean to support.

Kahli Burke

@kahliburke

The idea in putting value set into a Future was to get out of the graph and schedule a new change event to occur in the future.

杨博 (Yang Bo)

@Atry

Creating a Future or a timer is also side effect. Don't do it in Binding block.

Kahli Burke

@kahliburke

Danger of reentry would be missing some change propagation?

杨博 (Yang Bo)

@Atry

If you really want to trigger side effect, you can use MountPoint.

MountPoint has more control to life cycle of event handlers than Binding blocks.

See https://stackoverflow.com/questions/44917823/how-to-execute-some-init-after-element-loaded-to-dom-with-binding-scala for instance.

杨博 (Yang Bo)

@Atry

Still, MountPoint is an utility to trigger external side effect, not an approach to change Vars.

Kahli Burke

@kahliburke

Yes, I have read this and it makes sense for that use case, it's not immediately clear to me how I'd apply it in this situation.

杨博 (Yang Bo)

@Atry

Though it is acceptable to use MountPoint to create a timer to change Vars.

You can create animations in that way.

If you want to change Var directly, then it's not your solution.

Kahli Burke

@kahliburke

Thanks for the information, I'll need to experiment a little bit to find a path I think. I think the main issue is around writing generic components (like a self contained class representing a select input) that can respond to both direct user input on that control, but also from changes that propagate from other controls in the system.

In this case, I actually want to respond to changes in the window.location history

Which propagate down through other structures, like a router

杨博 (Yang Bo)

@Atry

You can create a Route.Href, similar to the existing Route.Hash.

Kahli Burke

@kahliburke

I have a location based router that watches the href, which seems to work properly

杨博 (Yang Bo)

@Atry

For create generic components, have you tried to add an intermediate Binding that merges the internal Var and external changes together?

Kahli Burke

@kahliburke

I haven't, it may be a good approach but I'll have to spend some time investigating how to incorporate that, as right now the select input is nicely encapsulated, it renders out its DOM based on its internal structure, so to modify it to also accept some additional Binding that controls it for some less common cases seems dirty. What I have working now is that when the location changes, the select box object itself gets recreated, this instantiates a new Var but doesn't manipulate an existing one.

杨博 (Yang Bo)

@Atry

Your approach looks good to me.

Kahli Burke

@kahliburke

Ok, one thing that I might have right! :)

杨博 (Yang Bo)

@Atry

If what you want to recreate is just the Var, you can avoid recreating the HTML elements by use a Binding[Var[State]]as your internal state holder inside YourComponent, instead of Binding[YourComponent].

Kahli Burke

@kahliburke

Why the double wrapping of Var in Binding?

杨博 (Yang Bo)

@Atry

val bvs: Binding[Var[State]] = Binding {
  Var(externalState.bind)
}

Also your xxxHandler should change to Binding[Event => Unit] types as well.

杨博 (Yang Bo)

@Atry

def changeHandler = Binding {
  val vs = bvs.bind;
  { event: Event =>
    vs.value = event.currentTarget.asInstanceOf[Input].value
  }
}

@dom def renderComponent = {
  <input value={bvs.bind.bind} onchange={changeHandler.bind} />
}

Basim Khajwal

@basimkhajwal

Hi, I was wondering if it is ever bad practice to be using a lazy val instead of a def when creating a Binding ?

杨博 (Yang Bo)

@Atry

No difference if you carefully avoid recursive dependencies.

Mustafa Kuscu

@mcku

Hi @Atry, i have started using your library. I think some helpers like this may be useful for beginners. I am kind of observing that dealing with futures and bindings add up extra lines of code..

 // some helpers for binding.scala
  @dom def futureBindingToBinding[T](futureBinding: Binding[Option[Try[T]]], emptyVal: T): Binding[T] = futureBinding.bind
    .map((y:Try[T]) => y.get)
    .getOrElse(emptyVal)

  @dom def futureBindingToBindingSeq[T](futureBindingSeq: Binding[Option[Try[Seq[T]]]], emptyVal: Seq[T]): Binding[BindingSeq[T]] = {
    val tmpSeq: Seq[T] = futureBindingSeq.bind
      .map((y: Try[Seq[T]]) => y.get)
      .getOrElse(emptyVal)
    val x: BindingSeq[T] = Vars(tmpSeq: _*)
    x
  }

杨博 (Yang Bo)

@Atry

You can create your own library of these helpers. People will use your library as long as they feel useful.

Mustafa Kuscu

@mcku

It is amazing to see that yet Binding.scala is a client side JS what is executing, it is some order of magnitude faster than some of the competition.. It is type safe and no buggling with webpack and similar. Wow. I remember doing some logic from within componentDidMount (because that was the only straightforward/feasible way to do it), sometimes within seconds.. Binding scala.. same thing is done within milliseconds. Man, that is awesome..

杨博 (Yang Bo)

@Atry

Have fun!

林煒清(Lin Wei-Ching)

@superChing

Hi, this code return error, but if I put the v2 binding val into render function it works. I do not understand where's problem?

val v1:Any = 1 
@dom
val v2 = Binding {
    v1 match {
      case x:String => <p>str</p>
      case x:Int => <p>int</p>
    }
}
@dom 
def render = { <p>{v2.bind}</p> }
dom.render(document.body, render)

林煒清(Lin Wei-Ching)

@superChing

need help. thank you.

杨博 (Yang Bo)

@Atry

StackOverflow seems like a better place to ask questions like this

Kahli Burke

@kahliburke

@superChing Remove Binding from v2, it's already annotated with

@dom

林煒清(Lin Wei-Ching)

@superChing

thanks

Where communities thrive

People

Repo info

Activity