lazy loading/bindPromise

[alfonsogarciacaro]

Sorry @davedawkins, haven't checked the whole API but, is there something to bind promise/transform promises into SutilElements? I assume it shouldn't be very difficult as SutilElements are asynchronous by default. Binding promises would enable lazy loading and deferred elements (for fetching data, etc).

The helper should have 3 arguments:

• The promise: element is automatically updated when the promise is resolved
• Fallback (optional?): What to show while the promise hasn't resolved
• OnError (optional?): What to show if the promise fails

[davedawkins]

Here's how I do it

[<AutoOpen>]
module SutilExtensions =
    open Sutil
    type JS.Promise<'T> with
        member self.ToObservable() : ObservablePromise<'T> =
            let op = ObservablePromise<'T>()
            op.Run(self)
            op

let view (server : Server) dispatchExternal (setlistId : string) =

    Bind.el(
         (findCreateSetlist server setlistId).ToObservable(),
         fun x ->
            match x with
            | Waiting ->
                Html.div "Loading..."
            | State.Error x ->
                Html.div (x.Message)
            | Result (setlist,songs) ->
                viewSetlist server dispatchExternal setlist songs
    )

[davedawkins]

We can make an overload in Bind.el that accepts a Promise, and does the .ToObservable() part internally

[alfonsogarciacaro]

This works, thank you @davedawkins!