榆树:加载窗口宽度

Question

所以我在Elm做一个非常基本的登陆页面,我想根据初始屏幕尺寸确定要使用的图片,然后再调整大小.我在Window模块上找到了resize函数,并使其工作正常,但我也无法弄清楚如何在加载时执行它.

我正在寻找类似的东西:

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

我最终将图片作为div上的背景图像,然后根据屏幕尺寸更改图片,但感觉不太理想.是下一个使用elm-css的最佳方式吗？我错过了一些明显的东西吗

Answer 1

要在app加载时获取值,您可能希望使用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 } ! []

你在app启动时传递标志,如下所示:

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

Answer 2

您可以使用elm-lang/window在没有javascript的情况下执行此操作.

首先导入Window和Task

你需要一个像这样的消息:

type Msg
  = SetWindowSize Window.Size

然后,您只需使用以下命令初始化程序:

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

这将获得窗口的初始大小.

如果要连续跟踪窗口大小更改,则需要订阅 Window.resizes