如何用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。

将其称为“外部功能接口”的讽刺之处在于，JavaScript通常被认为是浏览器的“原生”。所以这里有一点术语混乱。

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

让我们尝试一个操作DOM的简单示例。我有一个简单的HTML文档，我希望*将蓝色段落改为红色段落，或者*每秒钟切换一次(在红色和蓝色之间)。

我看不出ghcjs的工具集如果不能完成这些非常基本的测试用例并对其进行解释，它将如何完成更困难的任务。下面是我在Github上提出的一个问题，其结论是ghcjs缺乏一个良好的登船过程。

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

Answer 1

下面是一个简短的自包含示例，它使用反射性进行您所描述的红/蓝颜色切换。这是[医]附睾在这个答案到你之前的问题中包含的代码的修改版本。

{-# 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

当然，反射(以及反射)是一个比ghcjs更高层次的库，它有自己的一组概念(事件、动态、行为等)，您需要适应这些概念。

该示例的工作方式是创建一个动态Map，它指定的样式每秒钟从红色到蓝色交替，并使用该动态映射对元素进行样式设置。

为了清楚起见，这个示例包含一些不严格要求的类型声明。

这个项目：如何更改h1标记与-ghcjs-dom包含上面的代码。下面是一个基于浏览器的演示的链接：如何更改h1标记与-ghcjs-dom/