fable-f# - Fable Elmish 中的属性与属性
问题描述
我正在阅读“Elm in Action”一书,并尝试将在那里开发的应用程序转换为 Fable-Elmish。许多东西直接从 Elm 翻译成 Elmish,但不是所有东西(至少不是直接翻译)。现在我正在尝试了解如何在 Fable-Elmish 中的自定义 HTML 元素上设置属性。本书有一个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-Elmish。
我的 Elmish 代码中有一个类似的块,如下所示:
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
榆树。我只是通过浏览源代码找到了Custom
构造函数和domEl
函数(文档似乎非常缺乏)。
在最初的 Elm 代码中,它区分了max
作为属性和val
作为属性。看来我也设置val
为属性而不是属性。是这样吗?如果是这样,我该如何正确设置属性?
解决方案
推荐阅读
- java - 在 Fragment (Kotlin) 中创建对话框时出现问题
- swift - 每次我从当前位置滚动时,MapKit 都会自动缩放回当前位置
- node.js - 不必为每个 Router express 指定中间件
- sockets - 当服务器 rsyslogd 关闭时,rsyslogd 客户端未关闭 TCP 连接
- reactjs - 如何在 createAction 的 prepareAction 函数中访问 store 实例?
- java - 如何使 Hibernate 自定义类型应用于聚合函数?
- sql - 选择交付的最高订单
- reactjs - 从对象数组访问数据时反应中的类型错误
- c# - 重定向页面后会话丢失
- python - 如何将 AxesSubplot 转换为 Axes 对象以使 subplots_adjust 仅适用于未转换的 AxesSubplot