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

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

0 голосов
/ 11 апреля 2019

Я пытаюсь написать простое приложение на 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. Я пытаюсь добавить, например, другой ввод, текст, кнопку или любой другой элемент, но как я могу? Я не могу найти никаких правил, которым нужно следовать. Чего мне не хватает?

UPDATE: 

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 'не соответствует строке типа

Ответы [ 2 ]

0 голосов
/ 11 апреля 2019

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

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 # .

0 голосов
/ 11 апреля 2019

По сути, 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 "?" ] ]
...