问题
I'm using purescript-halogen
v0.12.0
, and I can't figure out why only the id
tag is rendering.
This occurs even with supposedly well supported elements, like div
.
Example:
render = div [ id_ "some-id", name "some-name ] []
A div will be created, but only with an id
attribute. This occurs with elements in Halogen.HTML
as well as Halogen.HTML.Indexed
.
Any help in the right direction would be appreciated.
=============================================================
Reproduce the issue with the following.
pulp init
bower i purescript-halogen
npm i virtual-dom
============
module Main where
import Prelude
import Control.Monad.Eff (Eff)
import Control.Monad.Eff.Console (CONSOLE, log)
import Halogen as H
import Halogen.HTML (div, text)
import Halogen.HTML.Properties (id_, name, pixels, height, width)
import Halogen.Util (awaitBody, runHalogenAff)
type State = Int
data Query a = Toggle a
ui :: forall g. (Functor g) => H.Component State Query g
ui = H.component { render, eval }
where
render :: State -> H.ComponentHTML Query
render st = div [ id_ "my-id", name "my-name", height (pixels 3), width (pixels 4) ] [ text "here!" ]
eval :: Query ~> H.ComponentDSL State Query g
eval (Toggle next) = pure next
main :: forall e. Eff (H.HalogenEffects e) Unit
main = runHalogenAff $ do
body <- awaitBody
H.runUI ui 0 body
回答1:
This is occurring as name
is not a valid property to apply to a div
, nor are width
or height
- if you're using the Indexed
elements and properties you'll see there's a type error when trying to set width
or height
. Try changing the div
for an input
and you'll see the properties applied as they should be.
The indexed elements do allow setting a name
on the div
however, which is a bug.
The reason these properties do not show in the rendered HTML is they are being set as properties rather than attributes. Properties must exist in the javascript interface for the element otherwise they are ignored. This isn't a Halogen thing so much as the DOM.
来源:https://stackoverflow.com/questions/41688580/purescript-halogen-html-dsl-only-renders-id-tags