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

Question

我有带有 html 标记的字符串，我想从中创建 Doc elment，如下所示：

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

据我所知，目前无法做到这一点。好吧，有什么不能准确缝合的，我试着用jquery:

粗略钉一下

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

但是要调用这段代码，我需要为 Doc 元素指定一个事件处理程序。但是在UI.Next中没有实现。我尝试用给定的 CSS class 异步跟踪模型的变化：

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]

但是太难了，不可靠，也不太行得通。如果可能的话，请给我一个解决问题的想法。提前致谢！

Answer 1

已经在 https://github.com/intellifactory/websharper.ui.next/issues/22 上回答了这个问题，但在这里复制我的回答：

如果您只想从静态 html 创建一个 UI.Next 文档，您可以执行以下操作：

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

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

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

Answer 2

以防万一有人需要在 服务器 上的 WebSharper 中使用静态 HTML（我需要 add some javascript to the WebSharper generated HTML page），有相当新的 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 ]
        )
    )

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

The ability to create Doc element of hypertext in Websharper.UI.Next

web

f#

frp

websharper