General questions should be asked on StackOverflow, not here. This room focuses on development of Binding.scala.
Hi, could someone point out what the cause of this error is in the following import com.thoughtworks.binding.Binding.{ Var, Vars }
import com.thoughtworks.binding.dom
import org.scalajs.dom.document
case class Model(name: String, contents: Vars[Double])
@dom
def render = {
val models = Vars(
Model("A Model", VarsDouble)
)
<div>
{
for (model <- models) yield {
<h3>{model.name}</h3>
<ul>
{
for (i <- model.contents) yield {
<li>{i.toString}</li>
}
}
</ul>
}
}
</div>
}
dom.render(document.body, render)
Sorry, forgot to format
The following code is what I'm trying to achieve in my own project (with a more complicated interface but the same error is what I am finding difficult to overcome).
import com.thoughtworks.binding.Binding.{ Var, Vars }
import com.thoughtworks.binding.dom
import org.scalajs.dom.document
case class Model(name: String, contents: Vars[Double])
@dom
def render = {
val models = Vars(
Model("A Model", Vars[Double](1,2,3))
)
<div>
{
for (model <- models) yield {
<h3>{model.name}</h3>
<ul>
{
for (i <- model.contents) yield {
<li>{i.toString}</li>
}
}
</ul>
}
}
</div>
}
dom.render(document.body, render)Running this (https://scalafiddle.io/sf/9eib3hm/0) gives the following error:
ScalaFiddle.scala:16: error: overloaded method value domBindingSeq with alternatives:
( text: String )binding.this.Binding.Constants[raw.this.Text]
( node: raw.this.Node )binding.this.Binding.Constants[raw.this.Node]
( seq: Seq[raw.this.Node] )binding.this.Binding.Constants[raw.this.Node]
( bindingSeq: .this.com.thoughtworks.binding.Binding.BindingSeq[raw.this.Node] ).this.com.thoughtworks.binding.Binding.BindingSeq[raw.this.Node]
cannot be applied to (.this.com.thoughtworks.binding.Binding.BindingSeq[.this.com.thoughtworks.binding.Binding.BindingSeq[raw.this.Node]])
for (model <- models) yield {
^
}Any help would be appreciated
@basimkhajwal You might want to look at this stack overflow: https://stackoverflow.com/questions/43675301/how-to-combine-binding-fragments-without-wrapping-them-in-an-xml-literal
But in general the issue with using for/yield is that it turns into a map operation, when you really want a flatMap for what you're doing. So an alternative way would be to do:
models flatMap { model =>
<h3>
{model.name}
</h3>
<ul>
{for (i <- model.contents) yield {
<li>
{i.toString}
</li>
}}
</ul>
}
This is only an issue when you're returning a sequence of xml elements from each element in a Vars or some other collection.
@basimkhajwal In scala a for comprehension is syntactic sugar for chaining flatMap, map -> https://docs.scala-lang.org/tutorials/FAQ/yield.html#translating-for-comprehensions
Is that purely about the
@dom macro or does that extend to setting Var.value inside a Binding{ .. } block?
Both
.value and .value_= are side effects.
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
@lolgab It would be not very hard to support scala-native. PR is welcomed.
The idea was to use
Binding { val store = binding.bind; Future { var.value = store} }.watch to break out of Binding context
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.
Thinking about the dependency graph. A
Var is always the source of the onchange event, not a intermediate node.
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?
MountPoint has more control to life cycle of event handlers than Binding blocks.
You can create animations in that way.
If you want to change
Var directly, then it's not your solution.
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
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.