检查榆木的高度

Question

我具有以下html结构：

div.mainContainer
   button
   div.container
      div.block
         text
      div.block
         text

[.block s是可编辑的（contenteditable），因此您可以添加文本。

当您单击按钮时，新的.block被添加在第一个.container内的第一个位置，

我想检查.container的高度，当它的高度大于400px时，应添加新容器并将第一个.container的最新块移动到第二个，直到第一个.containter不大于400px。依此类推，如有必要，请输入第三个.container。

我的Elm应用程序具有以下模型：

type alias Model =
    { content: List String}

我的看法：

view : Model -> Html Msg
view model =
    div [ class "mainContainer"]
        (buttonView :: (viewContainer model) :: [])

viewContainer : Model -> Html Msg
viewContainer model =
    div [ class "container" ]
        (map blockView model.content)

buttonView : Html Msg
buttonView =
    button [onClick NewBlock] [ text "New block"]

blockView : String -> Html Msg
blockView contentText = 
    div [ class "block", contenteditable True]
        [ text contentText ]

我从两个方块开始：

init : () -> ( Model, Cmd Msg )
init _ =
    ({ content= "Lorem"::"Ipsum"::[]}, Cmd.none )

单击按钮将新块添加到模型：

newBlock : Model -> Model
newBlock model =
    { model | content = "example"::model.content}

[Msg类型和update功能：

type Msg
    = CheckHeights
    | NewBlock


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        CheckHeights ->
            ( model, Cmd.none ) -- How do it?
        NewBlock ->
            (model |> newBlock, Cmd.none)

我认为最好的方法是使用订阅（onKeyDown事件），但我不知道如何检查以上update函数。

subscriptions : Model -> Sub Msg
subscriptions _ =
    onKeyDown (Decode.succeed CheckHeights)

您可以在此处检查我的代码：https://ellie-app.com/8KCV7jjT94va1

Answer 1

update