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