文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将纯卤素组件呈现到<head>标记中

问如何将纯卤素组件呈现到<head>标记中
EN

Stack Overflow用户

提问于 2017-02-23 01:09:18

回答 1查看 779关注 0票数 3

如何将特定的purescript-halogen组件渲染到标签中？

下面为Halogen 1.0.0编写的示例将样式表和段落呈现到HTML正文中：

module Main where

import Prelude
import Control.Monad.Eff      (Eff)
import Data.Maybe             (Maybe(Nothing))

import CSS                    as C
import Halogen                as H
import Halogen.Aff            as HA
import Halogen.HTML           as HH
import Halogen.HTML.CSS       as HS
import Halogen.Query.HalogenM as HQ
import Halogen.VDom.Driver    as HV

styles :: forall p i. HH.HTML p i
styles = HS.stylesheet $
    C.select C.body $ C.margin C.nil C.nil C.nil C.nil

content :: forall p i. HH.HTML p i
content = HH.p_ [ HH.text "Test" ]

main :: Eff (HA.HalogenEffects ()) Unit
main = HA.runHalogenAff $ HA.awaitBody >>= HV.runUI ui unit
  where
    ui = H.component { initialState : const unit
                     , render       : const render
                     , eval         : const $ HQ.halt "no query"
                     , receiver     : const Nothing
                     }

    render = HH.div_ [ styles, content ]

DOM的生成方式如下：

<html>
    <head>
        <title>Test</title>
        <script async="" type="text/javascript" src="main.js"></script>
    </head>
    <body>
        <div>
            <style type="text/css">
                body { margin: 0 0 0 0 }
            </style>
            <p>
                Test
            </p>
        </div>
    </body>
</html>

这个示例可以工作，但根据specification，样式元素只允许“在需要元数据内容的地方”，即元素。所以我想在那里呈现样式表。我该如何做到这一点？

purescript

halogen

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-23 19:39:51

请注意awaitBody函数-在等待它加载的同时，它选择了body元素，在本例中这并不是您真正想要的元素。如果要写入head，则需要选择它并将其传递给呈现样式表的组件的runUI。

您还需要运行两个独立的组件，一个用于head，一个用于body

module Main where

import Prelude

import Control.Monad.Aff.Console (CONSOLE)
import Control.Monad.Eff (Eff)

import Data.Const (Const)
import Data.Foldable (traverse_)
import Data.Maybe (Maybe(..))
import Data.Newtype (unwrap)

import Halogen as H
import Halogen.Aff as HA
import Halogen.HTML as HH
import Halogen.VDom.Driver (runUI)

bodyComponent :: forall m. H.Component HH.HTML (Const Void) Unit Void m
bodyComponent =
  H.component
    { initialState: const unit
    , render: const $ HH.div_ [ HH.text "A component" ]
    , eval: absurd <<< unwrap
    , receiver: const Nothing
    }

styleComponent :: forall m. H.Component HH.HTML (Const Void) Unit Void m
styleComponent =
  H.component
    { initialState: const unit
    , render: const $ HH.style_ [ HH.text "body { background: #222; color: #eee }"]
    , eval: absurd <<< unwrap
    , receiver: const Nothing
    }

main :: Eff (HA.HalogenEffects (console :: CONSOLE)) Unit
main = HA.runHalogenAff do
  HA.awaitLoad
  traverse_ (runUI styleComponent unit) =<< HA.selectElement "head"
  traverse_ (runUI bodyComponent unit) =<< HA.selectElement "body"

如果它们需要通信，那么您可以使用runUI生成的HalogenIO记录中的subscribe和driver函数在它们之间建立通道。

我担心这样做，因为你应该通过一个空的元素作为容器渲染的目标……但是当使用卤素提供的VDom驱动程序时，它看起来至少表现良好，因为样式内容不会被样式组件替换(它被附加到末尾)。这基本上是未指明的行为，所以我不确定它是否一定适用于其他驱动程序。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42397989

复制

相似问题

问如何将纯卤素组件呈现到<head>标记中
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将纯卤素组件呈现到<head>标记中EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将纯卤素组件呈现到<head>标记中
EN