Question

使用elm和elm-mdl让mdl组件在单页面应用程序中影响页面布局的推荐方法是什么？

我们是否可以将Model.Layout.ToggleDrawer等布局消息直接传递给model.mdl（在标准设置中），如果是，又如何传递？

或者我们应该在模型中维护一个单独的记录元素，例如model.layout : Material.Layout.Model，我们转发这些消息？但在这种情况下，如何初始化视图？

上下文

我正在使用elm-mdl版本8.1.0，elm版本0.18。我正在尝试使用elm和这个库来布局单页应用程序的基本架构。我从here和there以及this ticket中获取灵感，但我还没有看到我在寻找什么，或者如果它在那里就明白了。

我尝试过的例子

对于可重用性，我的应用程序的主要模型是唯一一个包含Material.Model条目的模型：

type alias Model = 
    { drawer : MyDrawer
    , ...
    , mdl : Material.Model
    }

从组件MyDrawer，我想定义一个发送ToggleSignal的按钮。我的主update方法中有一个案例，使用Model.Layout.update将此信号转发到Model.Layout.ToggleSignal方法。但是，此次调用的返回类型为Material.Layout.Model，我在自己的Model中没有。

如果我定义为我自己的模型添加layout : Material.Layout.Model，我可以转发对此元素的调用，但是如何初始化视图？到目前为止，我的观点是：

view : Model -> Html Msg
view model =
    Layout.render Mdl
        model
        [ Layout.fixedHeader
        , ...

根据Layout.render的签名，由于我的模型包含layout字段，因此应将其考虑在内。我的更新方法的相关部分是

ToggleDrawer ->
    let
        ( updatedLayout, cmd ) = Material.Layout.update Material.Layout.ToggleDrawer model.layout
        ( updatedDrawer, _ ) = Drawer.update subMsg model.drawer
    in
        ( { model | drawer = updatedDrawer, layout = updatedLayout }, Cmd.map MdlLayout cmd )

然而，当点击按钮时，抽屉不会隐藏。

提前感谢您对此有任何帮助 - 图书馆和语言使用起来非常愉快！

Answer 1

Material.Layout.render函数从model.mdl.layout检索其模型，而不是model.layout。

切换抽屉的好方法是使用toggleDrawer在update函数中发出合适的命令，如下所示：

ToggleDrawer -> 
    let
        ( updatedDrawer, _ ) = Drawer.update subMsg model.drawer
    in
        ( { model | drawer = updatedDrawer, layout = updatedLayout }
        , Layout.toggleDrawer Mdl
        )

使用elm-mdl库的Elm架构

上下文

我尝试过的例子

1 个答案: