从 javascript 对象中获取 elm 的类名答案

【问题标题】：Getting classnames for elm from a javascript object从 javascript 对象中获取 elm 的类名
【发布时间】：2021-07-06 11:04:41
【问题描述】：

我们有一个开发团队，他们使用通常用于 Vue/React 组件的 tailwind.css 创建标准 css 类。但是，我们正在尝试将 elm 用于新项目，并希望使用 js 文件中的相同类，因为它们正在维护中。

应该如何从 javascript-file 导入：

export const card = {
  cardSelected: 'bg-blue-50',
  cardOutline: 'f-card-outline absolute rounded-8 inset-0 transition-all border-2',

};

export const toaster = {
  toasterContainer: 'fixed fixed-ios-fix bottom-16 left-0 right-0 mx-8',
  toaster: 'f-toaster grid f-grid auto-rows-auto',
};

这样这些样式就被设置在一个元素上。例如用烤面包机：

div [class 'f-toaster grid f-grid auto-rows-auto'][]

【问题讨论】：

你到底想要什么，你尝试了多远？
我想要什么：能够在我的 elm 代码中使用 js 文件中指定的类，因为它们得到维护。我尝试了多远：我尝试通过标志/端口发送对象并使用 Json.Decode.Value 解码它们并将结果字符串设置为类。
请分享您的尝试。这对我来说仍然不清楚。
我们目前正在尝试上述方法。我们失败或成功后我会回来找你的:)

标签： javascript css elm

【解决方案1】：

您应该可以使用flags 完成此操作。

在您的 js 文件中，您可以：

const app = Elm.Main.init({
    node: document.getElementById('main'),
    flags: {
        card: {
            cardSelected: 'bg-blue-50',
            cardOutline: 'f-card-outline absolute rounded-8 inset-0 transition-all border-2',
        }
    }
})

你的Main.elm 看起来像这样：

type alias CardValues =
    { cardSelected : String
    , cardOutline : String
    }


type alias Card =
    { card : CardValues }


type alias Model =
    { flags : Card }


main : Program Card Model Msg
main =
    Browser.element
        { init = \flags -> ( { flags = flags }, Cmd.none )
        , view =
            \model ->
                Html.div
                    [ Html.class model.flags.card.cardOutline ]
                    [ Html.h1 [] [ Html.text "Here!" ] ]
        , update = \_ model -> ( model, Cmd.none )
        , subscriptions = \_ -> Sub.none
        }

【讨论】：

绝妙的答案！它就像一个魅力。感谢您帮助像我这样的初学者！