Как мне добавить HTML-элементы в мою модель представления в Fable?

#f# #fable-f#

Вопрос:

Я пытаюсь написать простое приложение в Fable, но у меня проблемы с настройкой элементов. Я не могу добавлять новые элементы, не разрушая существующие.

 let view model dispatch =
    div [ Class "main-container" ]
        [ input [ Class "input"
                  Value model.Value
                  OnChange (fun ev -> ev.target?value |> string |> ChangeValue |> dispatch) ]
          span [ ]
            [ str "Hello, "
              str model.Value
              str "!" ] ]

Это пример из fable.io webste. Я пытаюсь добавить, например, другой ввод, текст, кнопку или любой другой элемент, но как я могу? Я не могу найти никаких правил, которым необходимо следовать. Чего мне не хватает?

Обновить:

 let view model dispatch =
    let digit n = digitBtn n dispatch
    div
      [ calcStyle ]
      [
        br []
        table []
            [ digit 1 ] ]

выдает ошибку

Несоответствие типов. Ожидая ‘Model -> Dispatch -> ‘a’, но учитывая ‘Model -> (string -> unit) -> Fable.Import.React.ReactElement’ Тип ‘Msg’ не соответствует типу string

1. Я не знаю ваших calcStyle digitBtn функций и, но если я просто удалю стиль (оставлю пустой список) и сделаю let digit n = button [ Type "button" ] [ str (n.ToString()) ] , он скомпилируется… Можете ли вы опубликовать остальную часть файла? ( Program.mkProgram ... )

2. В вашем обновленном примере я должен догадаться, что такое определение digitBtn , но, похоже, ожидается функция отправки, отличная от той, которую вы получаете view здесь. В этом случае вам нужно либо изменить способ dispatch использования, digitBtn либо передать ему функцию отправки, соответствующую тому, что он ожидает. Распространенный шаблон заключается в том, чтобы обернуть отправленное значение в Msg вариант, выполнив MyMsgVariant >> dispatch

Ответ №1:

Вот еще один текстовый элемент, добавленный в конец:

 let view model dispatch =
    div [ Class "main-container" ]
        [ input [ Class "input"
                  Value model.Value
                  OnChange (fun ev -> ev.target?value |> string |> ChangeValue |> dispatch) ]
          span [ ]
            [ str "Hello, "
              str model.Value
              str "!" ]
          str "Goodbye!" ]

Не зная, что вы пробовали, я должен догадаться, что может вас смутить. Но я предполагаю, что это уникальная чувствительность F # к пробелам. F # часто обрабатывает новую строку как разделитель между строками с отступом на том же уровне. в этом случае, input ... , span ... и str ... являются элементами списка.

Однако вы также можете явно разделять элементы списка точкой с запятой:

 let view model dispatch =
    div [ Class "main-container" ]
        [ input [ Class "input"
                  Value model.Value
                  OnChange (fun ev -> ev.target?value |> string |> ChangeValue |> dispatch) ]
          span [ ]
            [ str "Hello, "
              str model.Value
              str "!" ]; str "Goodbye!" ]

Подробнее о синтаксисе списка см. В справочной документации по языку F #.

1. Я попытался добавить элемент из другого примера, который у них есть на их веб-сайте. Я добавлю код к своему вопросу. И это ошибка, которую я получаю: несоответствие типов. Ожидая ‘Модель -> Отправка <Сообщение> -> ‘a’, но учитывая ‘Модель -> (строка -> единица измерения) -> Fable. Import.React. ReactElement’ Тип ‘Msg’ не соответствует типу string .

Ответ №2:

По сути, div принимает список свойств, а затем список элементов для хранения внутри. Итак, чтобы добавить еще один элемент внутри, вы можете добавить элемент в этот список.

Например, другой ввод:

 let view model dispatch =
    div [ Class "main-container" ]
        [ input [ Class "input"
                  Value model.Value
                  OnChange (fun ev -> ev.target?value |> string |> ChangeValue |> dispatch) ]
          span [ ]
            [ str "Hello, "
              str model.Value
              str "! " ]
          span [ ]
            [ str "How's life, "
              str model.Value
              str "?" ] ]