'I would like my child view to work, what must I do?
Here is my code
I have a parent and a child. My aim is to go from the parent's view to the child's view, but not sure how to accomplish it. Can someone explain how this works? The parent view is at the bottom and the child at the top. I think the problem might be the way I handle the update. I just want to wrap my head around the working of CMD and the working of subview in general.
// The child
module NetflixView =
type Model = { Netflix: string } // Is this really needed, because it's just a button function?
type Message =
| SetNetflix
| CancelClick
| LoginClickClick
type Intent =
| Cancel
| LoginClick
let init () =
{
Netflix = ""
}
, Cmd.none
let update (message:Message)(model:Model) =
match message with
| SetNetflix ->
( { model with Netflix = "" }
, Cmd.none
, None
)
| CancelClick ->
( model
, Cmd.none
, Some Cancel
)
| LoginClickClick ->
( model
, Cmd.none
, None
)
let view (model:Model) (dispatch) =
Field.div []
[ Field.body [ ]
[ Container.container [ ]
[ Columns.columns [ Columns.CustomClass "has-text-centered"
Columns.Props [ Style [ MarginTop "60px"]
]
]
[ Column.column [ Column.Width(Screen.All, Column.IsOneThird)
Column.Offset(Screen.All, Column.IsOneThird) ]
[ Image.image [ Image.Is128x128
Image.Props [ Style [ Margin "auto"] ] ]
[
img [ Src "assets/netflix.svg" ]
]
Field.div [ ] [ Text.span [ Modifiers [ Modifier.TextWeight TextWeight.Bold ] ]
[ str "Click Your Stream !!!" ] ]
Field.div [ ] [
div [ ClassName "block" ]
[ Button.button [
Button.Props [ Style [ MarginTop "3px" ]
]
]
[ str "Netflix" ]
]
]
]
]
]
]
]
// The Parent
module LoginClickOptionView =
type SubModel =
| NetflixViewModel of NetflixView.Model
type Model =
{
Name: string
Age:int
SubModel: SubModel option
}
type Message =
| SetName of string
| SetAge of int
| NetflixViewMessage of NetflixView.Message
| LoginClick
type Intent =
| DoClose
let init () =
{
Name = ""
Age = 0
SubModel = None
}
, Cmd.none
let update (message:Message) (model:Model) =
match message with
| SetName input ->
( { model with Name = input }
, Cmd.none
)
| SetAge input ->
( { model with Age = input }
, Cmd.none
)
| NetflixViewMessage subMessage ->
match model.SubModel with
| Some (NetflixViewModel subModel) ->
let (nextSubModel, nextSubMessage, anyIntent) = NetflixView.update subMessage subModel
match anyIntent with
| None ->
( { model with
SubModel = Some(NetflixViewModel nextSubModel)
}
, Cmd.map NetflixViewMessage nextSubMessage
)
| Some intent ->
match intent with
| NetflixView.Cancel ->
( { model with
SubModel = None
}
, Cmd.map NetflixViewMessage nextSubMessage
)
| NetflixView.LoginClick ->
( { model with
SubModel = Some(NetflixViewModel subModel)
}
, Cmd.map NetflixViewMessage nextSubMessage
)
| None ->
( model
, Cmd.none
)
| LoginClick ->
let subModel = NetflixView.init ()
( model
, Cmd.ofMsg LoginClick
)
let view (model: Model) (dispatch: Message -> unit) =
let subViewContent =
match model.SubModel with
| None -> []
| Some(NetflixViewModel subModel) ->
[ NetflixView.view subModel (NetflixViewMessage >> dispatch) ]
div [] [
yield! subViewContent
yield
Field.div []
[ Field.body []
[ Container.container []
[ Columns.columns [ Columns.CustomClass "has-text-centered"
Columns.Props [ Style [ MarginTop "60px"]
]
]
[ Column.column [ Column.Width(Screen.All, Column.IsOneThird)
Column.Offset(Screen.All, Column.IsOneThird) ]
[ Image.image [ Image.Is2by1
Image.Props [ Style [ Margin "auto"] ] ]
[ img [ Src "assets/ntv.jpg" ]
]
div [Style [ MarginTop "16px" ]] []
Field.div []
[ Label.label []
[ str "Enter your name" ]
Control.div [ ]
[ Input.text [
Input.OnChange (fun ev -> dispatch LoginClick)
Input.Props [ AutoFocus true
Style [ MarginTop "3px" ]
]
]
]
div [ Style [ MarginTop "24px" ] ] []
Label.label []
[ str "Enter your age" ]
Control.div [ ]
[ Input.text [
Input.OnChange (fun ev -> dispatch LoginClick)
Input.Props [ Style [ MarginTop "3px" ]
]
]
]
]
Field.div [] [
Control.div [] [
Button.button [
Button.Props [ Style [ MarginLeft "16px" ]
Style [ MarginTop "24px" ]
]
Button.OnClick (fun _ -> dispatch LoginClick)
] [
str "LoginClick"
]
]
]
]
]
]
]
]
]
open Elmish.React
open Elmish.Debug
open Elmish.HMR
Program.mkProgram init update view
|> Program.withReactSynchronous "elmish-app"
|> Program.withReactBatched "elmish-app"
#if DEBUG
|> Program.withDebugger
#endif
|> Program.run
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
