1

我发现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 缺乏良好的入职流程。

4

1 回答 1

3

这是一个简短的独立示例，它使用reflex-dom进行您描述的红色/蓝色切换。这是epsilonhalbe包含在您之前问题的答案中的代码的修改版本。 

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

于 2017-02-18T04:51:19.957 回答