added watcher for list item modification

elm.json

@@ -10,10 +10,10 @@
             "elm/browser": "1.0.2",
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",
-            "elm/json": "1.1.3"
+            "elm/json": "1.1.3",
+            "elm/time": "1.0.0"
         },
         "indirect": {
-            "elm/time": "1.0.0",
             "elm/url": "1.0.0",
             "elm/virtual-dom": "1.0.3"
         }

nativescript-bind-res/Native/Elements.res

@@ -106,6 +106,9 @@ module ListPicker = {
   %%private(
     @module("@nativescript/core") @new
     external new: unit => Types.nativeObject = "ListPicker"
+    let setItems = (current: Types.htmlElement, data) => {
+      data->Types.setItems(current.items)
+    }
   )
   let tagName = "ns-list-picker"
 
@@ -114,12 +117,8 @@ module ListPicker = {
     init: (. ()) => new(),
     observedAttributes: Constants.listPicker,
     render: Js.Nullable.return((. current: Types.htmlElement, _) => {
-      current.data
-      ->Js.Nullable.toOption
-      ->Belt.Option.forEach(data => {
-        data->Types.setItems(current.items)
-      })
-
+      current.data->Js.Nullable.toOption->Belt.Option.forEach(setItems(current))
+      Types.definePropertyInHtml(. current, "items", {set: setItems(current)})
       Helper.addView(. current.parentElement, current)
     }),
     handlerKind: Types.Element,

nativescript-bind-res/Native/Types.res

@@ -43,7 +43,7 @@ and htmlElement = {
   handler: Js.Nullable.t<handler>,
   data: Js.Nullable.t<nativeObject>,
   children: array<htmlElement>,
-  items: array<string>
+  items: array<string>,
 }
 and frameMethods = {pageAdded: (. htmlElement) => unit}
 and handlerKind =
@@ -56,3 +56,8 @@ type customElement = {
   tagName: string,
   handler: handler,
 }
+
+type setter<'a> = {set: 'a => unit}
+
+@scope("Object") @val
+external definePropertyInHtml: (. htmlElement, string, setter<'a>) => unit = "defineProperty"

src/Main.elm

@@ -10,14 +10,17 @@ import Native.Event as Event
 import Native.Frame as Frame
 import Native.Layout as Layout exposing (rootLayout)
 import Native.Page as Page
+import Process
+import Task
 
 
 main : Program () Model Msg
 main =
-    Browser.sandbox
-        { init = init
+    Browser.element
+        { init = always init
         , view = view
         , update = update
+        , subscriptions = subscriptions
         }
 
 
@@ -27,24 +30,29 @@ type NavPage
 
 type alias Model =
     { count : Int
+    , options : List String
     , current : NavPage
     , next : Maybe NavPage
     , history : List NavPage
     }
 
 
-init : Model
+init : ( Model, Cmd Msg )
 init =
-    { count = 0
-    , current = Details
-    , history = [ Details ]
-    , next = Just Details
-    }
+    ( { count = 0
+      , options = [ "2022", "2021", "2020" ]
+      , current = Details
+      , history = [ Details ]
+      , next = Just Details
+      }
+    , Cmd.none
+    )
 
 
 type Msg
     = Inc
     | Dec
+    | Replace
 
 
 
@@ -52,14 +60,26 @@ type Msg
 -- | Destory
 
 
-update : Msg -> Model -> Model
+update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
+        Replace ->
+            ( { model
+                | options =
+                    List.range 0 model.count
+                        |> List.map String.fromInt
+              }
+            , Cmd.none
+            )
+
         Dec ->
-            { model | count = model.count - 1 }
+            ( { model | count = model.count - 1 }
+            , Process.sleep 2000
+                |> Task.perform (always Replace)
+            )
 
         Inc ->
-            { model | count = model.count + 1 }
+            ( { model | count = model.count + 1 }, Cmd.none )
 
 
 
@@ -203,11 +223,12 @@ detailsPage model =
     Page.page []
         -- Event.on "navigatedTo" (D.succeed Destory)
         (Layout.stackLayout []
-            [ Native.segmentedBar [ NA.selectedBackgroundColor "red" ]
-                [ Native.segmentedBarItem [ NA.title "First" ] []
-                , Native.segmentedBarItem [ NA.title "Second" ] []
-                , Native.segmentedBarItem [ NA.title "Third" ] []
+            [ counter model
+            , Native.listPicker
+                [ E.list E.string model.options |> NA.items
+                , NA.selectedIndex "1"
                 ]
+                []
             ]
         )
 
@@ -224,3 +245,8 @@ view model =
 --     ]
 --     []
 --     |> Frame.root
+
+
+subscriptions : Model -> Sub Msg
+subscriptions model =
+    Sub.none