General questions should be asked on StackOverflow, not here. This room focuses on development of Binding.scala.
I provided some extractors for XML literal, which may help. See https://github.com/ThoughtWorksInc/Binding.scala/blob/11.0.x/XmlExtractor/src/main/scala/com/thoughtworks/binding/XmlExtractor.scala
Vars in input elementssomething 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} />
} @dom
def inputElem[V](value: Var[V], deserializeValue: String ⇒ V, serializeValue: V ⇒ String = {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
} 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
}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?
@Atry : Binding.scala should not be opinionated and it should let the user decide what make sense to him. Personally I can tell you that it is impossible to build a complex Saas UI without custom tags . Because you can easily get more than 4 nested tags. with a lot of different inline definition that can be nested itself with different child trees.
This the only way to get a cleaner Compoments reusable and build complexe UI.
Currently it is still not possible to do that : <MyComponentTest>test</MyComponentTest>
Instead you have to do that <MyComponentTest child="test" ></MyComponentTest>.
Which is not nice. And there is not way to verify at compile time if some properties are missing. I have been trying to use regular scala constructs for that but I reach the maximum level of complexity. Reaching that point we cannot longer develop more cleaner code with Binding.scala. I think this is something important and a real blocker for the people who really like Binding.scala and want to use it in real application.
Not sure what is your opinion on that but it will be great for us to know what is you decide to support that or not so we can do a well aware decision on the future usage of Binding.scala. Also you can also point to us what it would take to change the code and maybe we can build a separate custom build for that. This is my feedback and
Thank you !
@dom def apply(usersPage: Var[SubMenuInUsers]) : Binding[Node]= {
usersPage.bind match {
case AllUsersPage() => AllUsersComponents(
Graphql.DoAjaxAndReturnDom(
request = QueryBinding(AllUsersInATable.formGroupDefinitionsFrag, AllUserInATable.usersFrag),
displayOnSuccess = (result:ValueResult) => AllUsersInATable(
result.obj("data").obj("formGroupDefinitions").list(),
result.obj("data").obj("users").list(),
(result:ValueResult) => SomeNestingComponent(
"title",
value2,
)
onClickUserId = (userId:String) => (e:Event)=> {
usersPage := SingleUserPage(Var(userId))
}
)
)
).bind
case SingleUserPage(userId) => SingleUserMatrix.Container().bind
case GroupPage => GetAllGroupDefinitions().bind
}
}```
<AllUsersComponents>
<GraphQL
request = {QueryBinding(AllUsersInATable.formGroupDefinitionsFrag, AllUserInATable.usersFrag)}
>
<Success>
{
(result) => <AllUsersInATable
definitions = result.obj("data").obj("formGroupDefinitions").list(),
users = result.obj("data").obj("users").list()
>
{
(result) => <SomeNestingComponent title ="title", value2 = "value2">
}
</AllUsersInATable>
}
</Success>
</GraphQL>
</AllUsesComponents>
``` AllUsersComponents(
Graphql.DoAjaxAndReturnDom(
request = QueryBinding(AllUsersInATable.formGroupDefinitionsFrag, AllUserInATable.usersFrag),
displayOnSuccess = (result:ValueResult) => AllUsersInATable(
result.obj("data").obj("formGroupDefinitions").list(),
result.obj("data").obj("users").list(),
(result:ValueResult) => SomeNestingComponent(
"title",
value2,
)
onClickUserId = (userId:String) => (e:Event)=> {
usersPage := SingleUserPage(Var(userId))
}
)
)
)
