1

我正在学习 purescript 并想将以下 javascript/html 片段转换为它的 purescript 等效项。如果我从列表中选择一个元素，它只是添加/删除内容，它用于登录表单的引导下拉按钮。

$("li").click(function(){
    "use strict";
    var content = $(this).text();
    if (content === "Register") {
        $("#remember-label").remove();
        if ($("#confirm-div").length === 0){
            $("#input-div").append(
                "<div class=\"form-group\" id=\"confirm-div\">"
                  + "<div class=\"input-group\">"
                    + "<p class=\"input-group-addon\">"
                      + "<i class=\"fa fa-fw fa-lock\"></i>"
                    + "</p>"
                    + "<input class=\"form-control\""
                          + " id=\"cpassword\""
                          + " type=\"password\""
                          + " placeholder=\"retype password\">"
                  + "</div>"
                + "</div>");
        }
    }
    if (content === "Login") {
        $("#confirm-div").remove();
        if ($("#remember-label").length === 0) {
            $("#remember-div").prepend("<label id=\"remember-label\"><input id=\"remember\" type=\"checkbox\">Remember Me</label>");
        }
    }
    $("#login-btn").text(content);
    $("#login").attr("action", "/" + content.toLowerCase());
    $("#login-h2").text(content);
});

关键问题（我认为）是我无法从 blaze 呈现的字符串构造 JQuery 值 - 我认为错误发生在Right-blocks 中 - 在J.create我看到的示例中的部分 -div <- J.create "<div>"这显然不是字符串J.create所期望的一种使用漂亮的“blaze”语法来构造J.create. 还是我必须用 JQuery 模块重写 html 部分。

这是我到目前为止所得到的

module Main where

import Prelude hiding (div, id, append)

import Control.Monad.Eff
import Control.Monad.Eff.Console
import Control.Bind ((=<<))
import Data.Either
import Data.Monoid
import Data.String (toLower)

import qualified Data.Foreign as F
import DOM (DOM())
import Text.Smolder.HTML (Html(), div, label, input, p, i)
import Text.Smolder.HTML.Attributes ( id
                                    , placeholder
                                    , type'
                                    , className)
import Text.Smolder.Markup (Markup(), text, (!))
import Text.Smolder.Renderer.String (render)
import qualified Control.Monad.Eff.JQuery as J

main = do J.select "li" >>= J.on "click" fun


fun :: forall eff. J.JQueryEvent -> J.JQuery -> Eff (console :: CONSOLE, dom :: DOM | eff) Unit
fun _ _ = do content <- (F.readString <$> (J.getValue =<< J.select "this"))
             case content of
                  Right "Register" -> do J.select "#remember-label" >>= J.remove
                                         jqueryDiv <- J.create cpasswordDiv
                                         J.select "#confirm-div" >>= J.append jqueryDiv
                                         aux "Register"

                  Right "Login" -> do J.select "#confirm-div" >>= J.remove
                                      jqueryDiv <- J.create rememberDiv
                                      J.select "#remember-div" >>= J.append jqueryDiv
                                      aux "Login"
                  _ -> return unit

    where aux :: forall eff. String -> Eff (dom :: DOM | eff) Unit
          aux str = do J.select "#login-btn" >>= J.setValue str
                       J.select "#login" >>= J.setAttr "action" ("/" ++ toLower str)
                       J.select "#login-h2" >>= J.setValue str
                       return unit



rememberDiv :: String
rememberDiv = render $ div ! id "remember-div" $ do
                  label ! id "remember-label"
                        $ do input ! id "remember"
                                   ! type' "checkbox"
                             text "Remember Me"

cpasswordDiv :: String
cpasswordDiv = render $ withAddon "lock" ! id "confirm-div" $
                   input ! className "form-control"
                         ! type' "password"
                         ! placeholder "retype password"

withAddon :: String -> Markup -> Markup
withAddon addon htmlInput =
        div ! className "form-group" $
            div ! className"input-group" $ do
                p (faIcon addon) ! className "input-group-addon"
                htmlInput

faIcon :: String -> Markup
-- | inserts a fontawsome icon (fa) with fixed width (fa-fw)
-- see http://fontawesome.io/icons/ for a complete set of icons
faIcon str = i mempty ! className ("fa fa-fw fa-" ++ str)
4

0 回答 0