【问题标题】:Purescript: Halogen HTML DSL only Renders "id" tagsPurescript:仅卤素 HTML DSL 呈现“id”标签
【发布时间】:2017-01-17 03:21:58
【问题描述】:

我正在使用purescript-halogenv0.12.0,但我不明白为什么只有id 标记正在呈现。

即使使用据称得到良好支持的元素也会发生这种情况,例如 div

例子:

render = div [ id_ "some-id", name "some-name ] []

将创建一个 div,但只能使用 id 属性。 Halogen.HTMLHalogen.HTML.Indexed 中的元素会出现这种情况。

我们将不胜感激。

================================================ ===============

用以下内容重现问题。

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

【问题讨论】:

  • 我假设 name 属性仅用于 HTML 表单,并且在
    上被忽略。您是否尝试在另一个元素上使用该名称,例如
  • @stholzm 我相信如果 user7428320 没有使用索引元素中的任何内容,那么应该没有理由忽略这些属性。我还可以确认滚动您自己的自定义标签时不会显示属性,例如svg。如果对 html DSL 进行某种类型检查,它应该反映在编译器中,但事实并非如此。我还没弄清楚为什么。

标签: purescript halogen


【解决方案1】:

这是因为name 不是valid property 应用于div,也不是widthheight - 如果您使用Indexed 元素和属性,您将看到尝试设置 widthheight 时出现类型错误。尝试将 div 更改为 input,您会看到应用的属性应该是这样的。

索引元素确实允许在div 上设置name,但这是一个错误。

这些属性未显示在呈现的 HTML 中的原因是它们被设置为属性而不是属性。属性必须存在于元素的 javascript 接口中,否则将被忽略。这与其说是 DOM 不如说是卤素。

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签