Skip to content

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

@jbweeks

Description

@jbweeks

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....

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions