Skip to content

Commit 1083964

Browse files
authored
Update README.md
1 parent 485c60e commit 1083964

File tree

1 file changed

+82
-10
lines changed

1 file changed

+82
-10
lines changed

README.md

Lines changed: 82 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ Since the design preview is set for both the `MasterView` and the `CounterView`,
4545

4646
![image](https://user-images.githubusercontent.com/1030435/219421157-cfa2254c-a1aa-417c-9a8b-69a5bc4ef038.png)
4747

48-
4948
# Project Setup
5049

5150
Steps to create a new project:
@@ -57,18 +56,91 @@ Steps to create a new project:
5756
5) Replace the [`ViewLocator.fs`](https://github.com/JordanMarr/Elmish.Avalonia/blob/main/src/Samples/AvaloniaExample/ViewLocator.fs) with the one from from the [AvaloniaExample project](https://github.com/JordanMarr/Elmish.Avalonia/tree/main/src/Samples/AvaloniaExample). This makes it easier to bind the view/viewmodel and start the Elmish loop using convention.
5857
Looking at the [AvaloniaExample project](https://github.com/JordanMarr/Elmish.Avalonia/tree/main/src/Samples/AvaloniaExample), this allows us to bind the `MainView.axaml` `Content` via the `ViewLocator` to locate the appropriate view and start the Elmish loop.
5958

60-
# AvaloniaProgram
61-
The `AvaloniaProgram` contains functions that configure an Elmish program.
59+
# Sample Project
60+
Please view the [AvaloniaExample project](https://github.com/JordanMarr/Elmish.Avalonia/tree/main/src/Samples/AvaloniaExample).
6261

63-
* `AvaloniaProgram.startElmishLoop` - Starts the Elmish loop and binds the given view to the bindings.
62+
# AvaloniaProgram
63+
The `AvaloniaProgram` module contains functions that configure an Elmish program.
64+
65+
### AvaloniaProgram.startElmishLoop
66+
Starts the Elmish loop and binds the given view to the bindings.
67+
68+
```F#
69+
let start view =
70+
AvaloniaProgram.mkProgram init update bindings
71+
|> AvaloniaProgram.startElmishLoop view
72+
```
73+
74+
### AvaloniaProgram.withSubscription
75+
Creates one or more Elmish subscriptions that can dispatch messages and be enabled/disabled based on the model.
76+
77+
```F#
78+
let subscriptions (model: Model) : Sub<Msg> =
79+
let autoUpdateSub (dispatch: Msg -> unit) =
80+
let timer = new System.Timers.Timer(1000)
81+
let disposable =
82+
timer.Elapsed.Subscribe(fun _ ->
83+
let randomNull = rnd.Next(0, 99)
84+
match randomNull with
85+
| i when i = 0 ->
86+
dispatch AddNull
87+
| _ ->
88+
dispatch AddItem
89+
dispatch RemoveItem
90+
)
91+
timer.Start()
92+
disposable
93+
94+
[
95+
if model.IsAutoUpdateChecked then
96+
[ nameof autoUpdateSub ], autoUpdateSub
97+
]
98+
99+
100+
let vm =
101+
AvaloniaProgram.mkSimple init update bindings
102+
|> AvaloniaProgram.withSubscription subscriptions
103+
|> ElmishViewModel.create
104+
```
64105

65106
# ElmishViewModel
66-
The `ElmishViewModel` contains functions that configure an `IElmishViewModel`.
107+
The `ElmishViewModel` module contains functions that configure an `IElmishViewModel`.
67108
The `IElmishViewModel` has a single method, `StartElmishLoop`, which takes an Avalonia view, binds it with the bindings and starts the Elmish loop.
68109
Use of the `ElmishViewModel` is optional and exists primarily to facilitate the `ViewLocator` pattern.
69110

70-
* `ElmishViewModel.create` - Creates an `ElmishViewModel<'model, 'msg>`
71-
72-
* `ElmishViewModel.terminateOnViewUnloaded` - Creates an Elmish subscription when the view `Unloaded` event fires that dispatches the passed-in termination `'msg` to terminate the Elmish loop.
73-
74-
* `ElmishViewModel.subscribe` - Adds an Elmish subscription.
111+
### ElmishViewModel.create
112+
Creates an `ElmishViewModel<'model, 'msg>`
113+
114+
```F#
115+
let vm =
116+
AvaloniaProgram.mkProgram init update bindings
117+
|> ElmishViewModel.create
118+
```
119+
120+
121+
### ElmishViewModel.terminateOnViewUnloaded
122+
Creates an Elmish subscription when the view `Unloaded` event fires that dispatches the passed-in termination `'msg` to terminate the Elmish loop.
123+
NOTE: You must create a `'Msg` that will be registered to trigger loop termination.
124+
```F#
125+
let vm =
126+
AvaloniaProgram.mkProgram init update bindings
127+
|> ElmishViewModel.create
128+
|> ElmishViewModel.terminateOnViewUnloaded Terminate
129+
```
130+
131+
### ElmishViewModel.subscribe
132+
Adds an Elmish subscription.
133+
You will be passed the `view`, `model` and `dispatch`.
134+
NOTE: If you need the ability to toggle a subscription on and off, you will need to use `AvaloniaProgram.withSubscription` instead.
135+
136+
```F#
137+
let vm =
138+
AvaloniaProgram.mkProgram init update bindings
139+
|> ElmishViewModel.create
140+
|> ElmishViewModel.terminateOnViewUnloaded Terminate
141+
|> ElmishViewModel.subscribe (fun view model dispatch ->
142+
view.Loaded |> Observable.subscribe (fun _ ->
143+
printfn "View Loaded!"
144+
)
145+
)
146+
```

0 commit comments

Comments
 (0)