Bolero icon indicating copy to clipboard operation
Bolero copied to clipboard

Templating Docs: Add Select (options) example to docs

Open jkone27 opened this issue 2 years ago • 0 comments

I want do add a select sections with options, is not clear to me how to bind the different values for e.g. an enumeration type (or DU type) to a select template.

type BucketOption = FirstBucket | SecondBucket | MyCustomBucket
<template id="StorageTemplate">
        <h1 class="title">Mock Storage</h1>
        <p>
          <label for="bucketSelect">Choose a Bucket</label>
          <select name="buckets" id="bucketSelect">
            <option value="">--Please choose an option--</option>
            <option value="dog" class="select" bind="${BucketName}">Dog</option>
            <!--what do to here--!>
          </select>
         <button onclick="${GetStorageMock}" class="button">Get Storage Mock</button>
        </p>
        <p>
          ${BucketJsonValue}
        </p>
      </template>


and then in the view coede not clear (would like to keep it typed instead of string if possible?)

type Model =
    {
        page: Page
        counter: int
        mocks: MockInfo list option
        error: string option
        bucketName : MockBucket option
        storageMock : string option
    }


let storagePage (model : Model) dispatch =
    Main.StorageTemplate()
        .GetStorageMock(fun _ -> dispatch GetStorageMock)
        .BucketName(model.bucketName, fun n -> dispatch (SetBucketName n))
        .BucketJsonValue(if model.storageMock.IsNone then "" else model.storageMock.Value)
        .Elt()

jkone27 avatar Nov 10 '21 10:11 jkone27