Question

我正在看一些榆树的例子，我发现"Example 3: A Dynamic List of Counters"。我想改变它以包含复选框，因此单个列表包含计数器和/或复选框。每个人都有自己的动作和模型（例如名字和被检查的bool）。最重要的是，我想订购清单，以便选中的复选框全部显示在顶部，未选中底部，计数器显示在中间。

我找不到任何关于如何做和构建这个的例子。有什么帮助吗？

注意：我对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：不同类型元素的有序列表

1 个答案: