如何使用 ghcjs-dom 更改 <h1> 标签答案

【问题标题】：how to change <h1> tags with ghcjs-dom如何使用 ghcjs-dom 更改 <h1> 标签
【发布时间】：2017-02-17 23:16:37
【问题描述】：

我发现ghcjs 和ghcjs-dom 文档非常有限。这是这个基本的 HTML 文档。

h1 { font-family: Helvetica; }

p {font-family: Helvetica; color: blue; }

<h1>
Hello World
</h1>
<p>
This is my test document.
</p>

我读到ghcjs 只是将 Haskell 编译为 JavaScript。如果我想使用这个简单的文档来填充 DOM 树，我需要外部函数接口 (FFI)，可能还需要 ghcjs-dom。

将其称为“Foreign 函数接口”具有讽刺意味的是，JavaScript 通常被视为浏览器的“native”。所以那里有一点术语混乱。

在这个非常简单的例子中，也许

让我们尝试一个操作 DOM 的简单示例。我有一个简单的 HTML 文档，我想 * 将蓝色段落更改为红色段落或 * 每秒来回切换一次（在红色和蓝色之间）

如果 ghcjs 工具集甚至不能完成这些非常基本的测试用例并解释它，我看不出它会如何完成更难的任务。这是我在 Github 上提出的一个问题，结论是 ghcjs 缺乏良好的 on-boarding 进程。

https://github.com/ghcjs/ghcjs/issues/568

【问题讨论】：

我也愿意从这个简单的问题开始为ghcjs 的文档做出贡献！可能最终会有一些拉取请求
我感受到您的痛苦，您对文档情况等的看法肯定是正确的，但我不确定您的问题是什么。我用谷歌搜索了“ghcjs hello world”并找到了这个：github.com/ghcjs/ghcjs-dom-hello 和这个：github.com/ghcjs/ghcjs-examples 也许你可以澄清你的问题，然后通过参考这些例子自己回答，这将有助于未来的新人
如果您想使用 ghcjs 创建一个客户端网页，该网页具有您描述的交替红/蓝行为，那么 reflex/reflex-dom 可能是比直接使用 ghcjs-dom 更好的库选择（ reflex-dom 依赖于 ghcjs-dom)。
@jberryman 我在找short, self-contained examples 你能适应那个hello world的例子来回答我的问题吗？如果我在 StackOverflow 上提问，那是因为我还不熟悉这个库。我发现this 非常模棱两可的例子，它基本上只是键入 html 页面并使用 Haskell 向其中添加各种 JavaScript 功能。
@DaveCompton ghcjs-dom 有用吗？

标签： css haskell ghcjs ghcjs-dom

【解决方案1】：

这是一个简短的独立示例，它使用 reflex-dom 进行您描述的红色/蓝色切换。这是epsilonhalbe 包含在this answer 到your earlier question 中的代码的修改版本。

{-# LANGUAGE OverloadedStrings #-} 
{-# LANGUAGE ScopedTypeVariables #-} -- allows for local type declarations.
import Reflex
import Reflex.Dom
import Data.Text (Text, pack)
import Data.Map (Map)
import Data.Time.Clock (getCurrentTime)
import Control.Monad.Trans (liftIO)

webPage :: MonadWidget t m => m ()
webPage = do

  -- ticker Event fires once per second.
  ticker :: Event t TickInfo <- tickLossy 1.0 =<< liftIO getCurrentTime  

  -- counter Dynamic increases by one every second.
  counter :: Dynamic t Int <- foldDyn  (\_ n -> n+1) 0 ticker

  -- function to map from integer to red or blue style.
  let chooseColor :: Int -> (Map Text Text) 
      chooseColor n = "style" =: pack ("color: " ++ if (n `mod` 2) == 0 then "red" else "blue")

  -- redBlueStyle Dynamic changes each second.
  let redBlueStyle :: Dynamic t (Map Text Text) 
      redBlueStyle = fmap chooseColor counter

  -- insert an h1 elemnt.
  el "h1" $ text "Hello World!"

  -- insert a paragraph with Dynamic red blue style.
  elDynAttr "p" redBlueStyle $ text "This is my test document"

  return ()


css = "h1 {font-family: Helvetica;} p {font-family: Helvetica;}" 

main :: IO ()
main = mainWidgetWithCss css webPage

当然，reflex-dom（连同 reflex）是一个比 ghcjs-dom 更高级别的库，它有自己的一套概念（事件、动态、行为等），您需要熟悉这些。

该示例的工作原理是创建一个动态地图，该地图指定一种每秒从红色变为蓝色的样式，并使用该动态地图为元素设置样式。

为清楚起见，此示例包含一些并非严格要求的类型声明。

此项目：https://github.com/dc25/stackOverflow__how-to-change-h1-tags-with-ghcjs-dom 包含上述代码。这是一个基于浏览器的演示链接：https://dc25.github.io/stackOverflow__how-to-change-h1-tags-with-ghcjs-dom/

【讨论】：