Elm: 在加载时获取窗口宽度

Question

所以我正在使用Elm制作一个非常基础的着陆页，并且我想根据初始屏幕尺寸确定要使用哪个图片，然后在调整大小时再次确定。我在Window模块中找到了resize函数，并且成功地使其工作，但我无法弄清如何在加载时执行此操作。

我正在寻找类似于以下内容的东西：

initialModel : Model
initalModel model =
    {width = Window.size.width}

我最终将图片作为div的背景图像，并根据屏幕大小更改图片，但这种方法并不理想。下一个最好的方法是使用elm-css吗？我是否忽略了什么明显的东西？

- Mathias Egekvist

Answer 1

在应用程序加载时获取值，您可能需要使用Html.programWithFlags，并从Javascript中传递窗口大小。

type alias Flags =
    { windowWidth : Int }

type alias Model =
    { windowWidth : Int, ... }

main =
    Html.programWithFlags
        { init = init
        , update = update
        , subscriptions = \_ -> Sub.none
        , view = view
        }

init : Flags -> ( Model, Cmd Msg )
init flags =
    { windowWidth = flags.windowWidth } ! []

您可以在应用程序启动时传入标志，如下所示：

var app = Elm.Main.fullscreen({ windowWidth: window.innerWidth })

- Chad Gilbert

---

太棒了，你救了我的一天。尽管我期待JavaScript部分与Flags和Ports之间的互操作性更少。 - Mathias Egekvist

Answer 2

您可以使用elm-lang/window而无需使用JavaScript来完成此操作。

首先通过导入Window和Task开始。

您需要一个这样的消息：

type Msg
  = SetWindowSize Window.Size

然后，您只需要使用以下方式初始化您的程序：

Html.program
  { init = ( [model], Task.perform SetWindowSize Window.size )
    ...
  }

这将获取窗口的初始大小。

如果您想持续跟踪窗口大小的更改，您需要订阅Window.resizes。

- Ola Sikström

---

针对 Elm 0.19，建议使用 Browser.Events。 - Berend de Boer