反射FRP

を持つ単一のSVG要素私は、これはコンパイルされませんレフFRP内反射FRP

import Reflex.Dom 
import qualified Data.Map as Map 

main = mainWidget $ myDiv 

myDiv = el "svg" $ do 
    elAttr "circle" $ Map.fromList [ ("cx" , "50") , ("cy", "50"), ("r" , "40"), ("stroke" , "green"), ("fill", "yellow")]

を単一のSVG要素を記述しようとしています。ホープData.Mapが正しいです。

elAttr  :: String ->   Map String String -> m a -> m a

少し好奇心mainWidgetに関連付けられているが、主にだけ動作するようになっているものモナドm：私は型シグネチャがあるquickrefから知っています。

これは、reflexに付属のサンドボックスを使用してコンパイルされます。

出典

2016-07-08 john mangual

「これはコンパイルされません」 - 何ですエラーメッセージ？これらのケースでは、コンパイラエラーを通知することが常に重要です。 – bheklilr

'el'だけを望んでいないのですか？ – Alec

@alecどのように属性を取得できますか？ –

ここで修正する2つのことがあります。

まず、何かを返すことが必要です。しばしば、基本的なreturn()はコンパイルを許可します。

第2に、elAttrは2つの入力タイプをとるので、第2引数を$ではなくカッコで入れたい "円"の後に入力します。これは、それがどのように見えるかです

：コンパイル後

import Reflex.Dom 
import qualified Data.Map as Map 

main = mainWidget $ myDiv 

myDiv = el "svg" $ do 
    elAttr "circle" (Map.fromList [ ("cx" , "50") , ("cy", "50"), ("r" , "40"), ("stroke" , "green"), ("fill", "yellow")]) $ return()

は、ブラウザの要素インスペクタでこれを見ることができるはずです。

<html> 
    <head> 
    <script language="javascript" src="rts.js"></script> 
    <script language="javascript" src="lib.js"></script> 
    <script language="javascript" src="out.js"></script> 
    </head> 
    <body> 
    <svg> 
    <circle cx="50" cy="50" fill="yellow" r="40" stroke="green"></circle> 
    </svg> 
    </body> 
</html>

あなたはそれがブラウザに表示確認したい場合は、elDynAttrNS'して以下のようなあなたのSVG要素にこの属性xmlns="http://www.w3.org/20000/svg"を定義してください：

main = mainWidget $ myDiv 

myDiv = do 
    let attrs = constDyn $ fromList 
       [ ("width" , "500") 
       , ("height" , "250") 
       ] 
    let cAttrs = constDyn $ fromList 
       [ ("cx", "50") 
       , ("cy", "50") 
       , ("r", "40") 
       , ("stroke", "green") 
       , ("stroke-width", "3") 
       , ("fill", "yellow") 
       ] 

    s <- elSvg "svg" attrs (elSvg "circle" cAttrs (return())) 
    return() 

elSvg tag a1 a2 = do 
    elDynAttrNS' ns tag a1 a2 
    return() 

ns :: Maybe String 
ns = Just "http://www.w3.org/2000/svg"

出典

2016-07-08 15:31:11 katychuang

'elDynAttrNS'（名前空間を持つ要素について）は[cheatsheet]（https://github.com/reflex- frp/reflex-dom/blob/develop/Quickref.md）。 –

答えて

関連する問題