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

Question

我发现 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

Answer 1

这是一个使用 reflex-dom to do the red/blue color switching that you described. This is a modified version of the code that epsilonhalbe included in this answer to your earlier question 的简短 self-contained 示例。

{-# 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/Whosebug__how-to-change-h1-tags-with-ghcjs-dom contains the above code. Here is a link to a browser based demo: https://dc25.github.io/Whosebug__how-to-change-h1-tags-with-ghcjs-dom/

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

how to change <h1> tags with ghcjs-dom

css

haskell

ghcjs

ghcjs-dom