Заставить purescript-blaze и purescript-jquery работать вместе

Question

Я изучаю 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);
});

Критическая проблема (я думаю) состоит в том, что я не могу создать значение JQuery из рендеринговой строки - я думаю, что ошибка происходит в Right-блоки - на J.create участие в примерах, которые я видел - div <- J.create "<div>" который не является строкой J.create ожидает, что есть способ использовать хороший синтаксис "Blaze" для создания ввода для J.create, Или мне нужно переписать HTML-часть с помощью модуля JQuery.

Вот что я получил до сих пор

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)