Javascript 调整浏览器窗口（elm）大小时，图像不调整大小

我正在尝试收听“调整大小”事件，并相应地更改图像大小。但是，图像大小不会改变。我认为原因是我的“onResize”函数位于错误的位置。但我不知道在这个框架中还能在哪里嵌入它。如果这听起来很琐碎，很抱歉，但我已经查阅了很长时间的文档，找不到解决方案。完整的elm代码如下所示：

module App where

import Html exposing (..)
import Html.Attributes exposing (attribute, class, style, src, width, height)
import Html.Events exposing (on)
import Json.Decode exposing (object2, (:=), int)
import StartApp.Simple exposing (start)


-- MODEL

type alias Model = 
  { width : Int
  , height : Int
  }

init : Model
init = { width = 800, height = 800 }

-- UPDATE

type Action = NewSize Int Int

update : Action -> Model -> Model
update (NewSize w h) model = 
  { model | width = w, height = h }

-- VIEW

view : Signal.Address Action -> Model -> Html
view address model =
  div
    [ class "container", onResize address ]
    [ div
      []
      [ img
        [ src "http://package.elm-lang.org/assets/elm_logo.svg"
        , width model.width
        , height model.height
        ]
        []
      ] 
    ]

onResize : Signal.Address Action -> Attribute
onResize address =
  on "resize" (getWidthHeight view) (\(w, h) -> Signal.message address (NewSize w h))

getWidthHeight : a -> Json.Decode.Decoder ( Int, Int )
getWidthHeight view =
  object2 (,) ("innerWidth" := int) ("innerHeight" := int)


-- MAIN

main : Signal Html
main =
  start
    { model = init
    , update = update
    , view = view
    }

---

关于您的解决方案的一些要点

• 调整大小处理程序似乎已连接到正确的容器。那很好
• 您似乎正在将view函数作为参数getWidthHeight传递。
  • 这不会起作用，但你的getWidthHeight实际上并没有用它做任何事情，所以我认为它也不会伤害任何东西

我相信您希望在getWidthHeight中使用的视图是json的一部分 解码器规则访问视图以访问窗口，然后提取innerWidth和innerHeight值。您正在尝试获取

视图.innerWidth

和

视图.innerHeight

根据resize事件属性的描述，我很确定这就是您想要的解码器

getWidthHeight : Json.Decode.Decoder (Int, Int)
getWidthHeight =
  object2
    (,)
    (Json.Decode.at ["view", "innerWidth"] int)
    (Json.Decode.at ["view", "innerHeight"] int)

然而，我已经在本地应用了这些更改，还有一些其他更改，我还没有让您的示例发挥作用，仍在尝试，但目前我缺少一些东西

替代的黑客解决方案。

• 我尝试了一个快速的破解，得到了一些有用的东西，但有点笨重
• 我从StartApp转到StartApp，很简单。
  • 我这样做是为了从Window.dimensions添加一个新的输入流
• 然后，我将Window.dimension事件映射到您执行的调整大小操作

这对初始窗口尺寸不起作用，但一旦开始调整大小，它就会起作用

module App where

import Effects exposing (Effects, Never)
import Html exposing (..)
import Html.Attributes exposing (attribute, class, style, src, width, height)
import StartApp exposing (start)
import Window


-- MODEL
type alias Model = 
  { width : Int
  , height : Int
  }

init : (Model, Effects Action)
init = 
  ( { width = 200
    , height = 200 }
    , Effects.none
  )

-- UPDATE
type Action = NewSize Int Int

update : Action -> Model -> (Model, Effects Action)
update (NewSize w h) model = 
  ( { model 
    | width = w
    , height = h 
    }
  , Effects.none
  )

-- VIEW

view : Signal.Address Action -> Model -> Html
view address model =
  div
    [ class "container" ] -- , onResize address ]
    [ div
      []
      [ img
        [ src "http://package.elm-lang.org/assets/elm_logo.svg"
        , width model.width
        , height model.height
        ]
        []
      ] 
    ]


main = 
  app.html

-- APP
app =
  start
    { init = init
    , update = update
    , view = view 
    , inputs = 
      [
        Signal.map (\(w,h) -> NewSize w h) Window.dimensions
      ]
    }


--port tasks : Signal (Task.Task Never ())
--port tasks =
--  app.tasks

额外信息。 这里有许多不同事物的有用例子。

---

使用Window.dimensions的示例可能会帮助您了解一些情况。

谢谢！这很有帮助！我有一个与设计相关的问题。假设我将此图像包装到另一个模块中，并定义其自己的newsize操作。现在在主模块中，我导入它，并希望使用窗口信号来指定图像的大小。但是，由于图像模块的newsize操作没有公开，我应该如何将此信息传递给它？我认为完成本教程可能是您的最佳选择。它涵盖了组件和如何委派工作。作为一项规则，我相信你的所有行动都需要在你的最高级别上以一种单一的类型进行访问，并且它不需要授权给行动导致发生的事情。别忘了投票：）