Атрибуты против свойств в Fable Elmish - PullRequest
0 голосов
/ 09 мая 2020

Я просматриваю книгу «Вяз в действии» и пытаюсь преобразовать разработанное там приложение в Fable-Elmi sh. Многие вещи переводятся напрямую с Elm на Elmi sh, но не все (по крайней мере, не напрямую). Прямо сейчас я пытаюсь понять, как установить свойства для пользовательского элемента HTML в Fable-Elmi sh. В книге есть пример объекта JS Range со следующим сценарием в файле HTML:

<link rel="stylesheet" href="http://elm-in-action.com/range-slider.css">
<script src="http://elm-in-action.com/range-slider.js"></script>
<script>
  class RangeSlider extends HTMLElement {
    connectedCallback() {
      var input = document.createElement("input");
      this.appendChild(input);

      var jsr = new JSR(input, {
        max: this.max,
        values: [this.val],
        sliders: 1,
        grid: false
      });
    }
  }

  window.customElements.define("range-slider", RangeSlider);
</script>

Код Elm для его инициализации выглядит следующим образом:

rangeSlider attributes children =
  node "range-slider" attributes children

viewFilter name magnitude =
  div [ class "filter-slider" ]
      [ label [] [ text name ]
      , rangeSlider
          [ max "11"
          , Html.Attributes.property "val" (Json.Encode.int magnitude)
          ]
          []
      , label [] [ text (String.fromInt magnitude) ]
]

Часть, которую я не понимаю, - это разница между атрибутами max и HTML.Attributes.property и то, как их перевести в Fable-Elmi sh.

У меня есть похожий блок в моем коде sh Elmi, который выглядит так:

let rangeSlider attributes children =
  domEl "range-slider" attributes children

let viewFilter name magnitude =
  ... // other elements
  rangeSlider [ Max "11"
                HTMLAttr.Custom ("val", Encode.int magnitude)
              ] []
  ...

Но это не похоже на правильность. Я считаю, что domEl эквивалентно node в Elm. Я нашел конструктор Custom и функцию domEl только путем троллинга по источникам (документов, похоже, ужасно не хватает).

В исходном коде Elm проводится различие между max как атрибутом и val как свойством. Похоже, я устанавливаю val как атрибут, а не свойство. Так ли это? Если да, то как правильно установить свойство?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...