Elm/html：不同类型元素的有序列表

Question

我在查看一些 Elm 示例时发现 "Example 3: A Dynamic List of Counters"。我想改变它以包含复选框，因此一个带有计数器 and/or 复选框的列表。每个都有自己的动作和模型（例如名称和选中的布尔值）。最重要的是，我想对列表进行排序，以便选中的复选框全部出现在顶部，未选中的出现在底部，计数器出现在中间。

虽然我找不到任何关于如何做和构造它的例子。有帮助吗？

注意：我对 Elm（以及一般的函数式编程）还很陌生。

谢谢！

Answer 1

实现此目的的一种方法是为项目使用联合类型（未经测试，我现在没有 Elm 环境来检查它）：

type Item = Checkbox String Bool | Counter

type alias Model =
    { items : List ( ID, Item )
    , nextID : ID
    }

根据项目的类型，您可以将其呈现为

viewItem item =
   case item of
     Counter value -> renderCounter value
     CheckBox name state -> renderCheckbox name state

您的视图所要做的就是为每个项目调用 viewItem，对项目进行排序并将所有内容放入容器中（例如 div）：

view address model =
  let 
    items = List.map (viewItem address) model.items 
            |> List.sort (your custom sorting here)
  in
      div [] ([remove, insert] ++ items)

Elm/html：不同类型元素的有序列表

Elm/html: ordered list of different kind of elements

elm