ochrons / scalajs-spa-tutorial

Tutorial for creating a simple Single Page Application in ScalaJS
Apache License 2.0
672 stars 229 forks source link

Nested Components, ModelProxies -- how to nest components with different model objects? #72

Open jbweeks opened 7 years ago

jbweeks commented 7 years ago

Hi, I am new to ScalaJS React, Diode, etc. and trying out this project, and am building a search dialog that I want to contain a table of results. All is fine -- I can capture the Keyword (represented as a first class model object), do the search, and map the results to a Results object in the model, but I am having trouble nesting the result table in the search dialog, as the result table is currently tied to the Results object and I can't initialize the results child table component from the parent search dialog, as it looks as if the framework only supports a single model proxy inside a render method:

https://gitter.im/ochrons/scalajs-spa-tutorial/archives/2016/06/23

def render(p: Props) = {
  Panel(Panel.Props("Search"), <.div(
    bss.formGroup, ^.marginTop := 20,
    <.label(^.`for` := "lookupField", "Keyword"),
    <.input.text(bss.formControl, ^.width := 200, ^.id := "keyword",
      ^.placeholder := "type keyword search term(s) here",
      ^.onBlur ==> findNearby(p.proxy)),
    <.br,
    <.p(p.proxy.value.getOrElse(Keyword("","")).id)
    // HOW DO I DO THIS? SearchResultsTable()
  ))
}

Do I need to artificially create a new aggregate model object that captures both the query Keyword from the search dialog and the Results from the dialog's table, or is there another way that I am completely missing?

Thanks in advance....