sequencing (parallel) Observables in Outwatch (or zipping)

Question

How should I render a list of Observables in Outwatch? What if I need a single Observable: how should I sequence/zip them as an applicative? Is it expected that it render, when I use the applicative(?) operation 'zip' to transform a List[Observable] to an Observable[List] ? (ie when I don't need Observables to be chained)

val literals:Seq[Observable[VNode]] = handlers.map { i => i.map(li(_)) }
return div(ol( children <-- Observable.zip[VNode, Seq[VNode]](literals)(identity) ))

With one answer below

div(ol(
    (for (item <- literals) yield { child <-- item} ):_*))

any one child is only rendered only after every input has been entered by the user. How do I render each child as soon as the user enters any first input, without having to enter them all?

Full code follows

import outwatch.dom._
import rxscalajs.Observable
import scala.scalajs.js.JSApp

object Outwatchstarter extends JSApp {
  def createInputMappedToStringHandler(s:Handler[String]) = input(inputString --> s)
  
  def main(): Unit = {
    val root = {
      val names = (0 until 2).map(_.toString) // when 0 until 1, this emits
      val handlers: Seq[Handler[String]] = names.map(name => createStringHandler())
      val inputNodes = handlers.map(createInputMappedToStringHandler)
      val notworkingformorethan1 = {
        val literals = handlers.map { i => i.map(li(_)) }
        val y: Observable[Seq[VNode]] = Observable.zip[VNode, Seq[VNode]](literals)(identity)
        div(ol(
          children <-- y
        ))
      }
      val list = List("What", "Is", "Up?").map(s => li(s))
      val lists = Observable.just(list)
      val workingList = ul(children <-- lists)

      div(
        div(inputNodes: _*),
        workingList,
        notworkingformorethan1)
    }
    OutWatch.render("#app", root)
  }
}

Nothing shows up when list length >1, but does with a one-element list. I'm an html/scala-js and rx noob. And may be misunderstanding how Observables may (or may not) be applicative functors. I was looking for 'sequence' rather than 'zip'.

Screenshot from full code

Answer 1

For-comprehensions work inside the OutWatch DOM DSL

div(ol(
    (for (item <- literals) yield { child <-- item} ):_*))