能够在Websharper.UI.Next中创建超文本的Doc元素

时间:2015-06-25 08:53:14

标签: web f# frp websharper

我有带有html标记的字符串,我希望像这样创建Doc elment:

Doc.FromHtm "<div><p>.....</p>.....</div>"

据我所知,现在这是不可能的。好吧,什么是不可能准确缝制,我试图使用jquery粗略指甲:

JQuery.JQuery.Of( "." + class'name ).First().Html(html'content)

但要调用此代码,我需要为Doc元素指定一个事件处理程序。但它没有在UI.Next中实现。 我尝试异步跟踪给定CSS类的模型更改:

let inbox'post'after'render = MailboxProcessor.Start(fun agent -> 
        let rec loop (ids'contents : Map<int,string>) : Async<unit> = async {
            // try to recive event with new portion of data
            let! new'ids'contents = agent.TryReceive 100
            // calculate the state of the agent
            let ids'contents = 
                // merge Map's
                (   match new'ids'contents with
                    | None -> ids'contents
                    | Some (new'ids'contents) -> 
                        new'ids'contents @ (Map.toList ids'contents)
                        |> Map.ofList )                    
                |> Map.filter( fun id content ->
                    // calculate CSS class name
                    let class'name = post'text'view'class'name id
                    // change it's contents of html
                    JQuery.JQuery.Of( "." + class'name ).First().Html(content).Size() = 0)
            // accept the state of the agent
            return! loop ids'contents }
        loop Map.empty )         

然后,例如,对于一个元素:

inbox'post'after'render.Post [id, content]

但它太难了,不可靠而且没有真正起作用。 如果可能的话,请告诉我如何解决问题。提前谢谢!

2 个答案:

答案 0 :(得分:2)

如果有人需要在服务器(我需要add some javascript to the WebSharper generated HTML page)的WebSharper中使用静态HTML,那么可以使用相当新的Doc.Verbatim例如let Main ctx action title body = Content.Page( MainTemplate.Doc( title = title, menubar = MenuBar ctx action, body = body, my_scripts = [ Doc.Verbatim JavaScript.Content ] ) ) 。像

Flow

答案 1 :(得分:1)

已在https://github.com/intellifactory/websharper.ui.next/issues/22上回答了此问题,但在此处复制了我的回答:

如果您只想创建一个UI.Next Doc from static html,您可以执行以下操作:

let htmlElem = JQuery.JQuery.Of("<div>hello</div>").Get(0)
let doc = Doc.Static (htmlElem :?> _)

这不是很好,但应该有效,我认为目前没有更好的方法。或者也许您可以使用模板,但尚未记录,我不确定它是否适合您的使用案例。

显然,如果您想动态更改呈现的元素,可以将其设为Var,并将Doc.EmbedViewDoc.Static一起使用。