外部 JS 库不适用于 Websharper 生成的标签

Question

根据这个post： External JS library with WebSharper in F#

并在此处集成实现： Tag input and type ahead with Bootstrap-taginput and typeahead.js in WebSharper.

我创建一个空的 WebSharper 项目并添加上面的代码，

构建项目并运行之后。原始的 taginput 工作得很好，但是 WebSharper 没有...

我认为有些地方不正确，但我无法弄清楚...有人可以帮忙吗？

Answer 1

问题是您 jQuery 包含了两次：一次是您在 index.html 中手动包含的，一次是 WebSharper 出于自身目的自动包含的。因此，当 jQuery 第二次从头加载时，TypeAhead 和 TagsInput 添加到最初加载的 jQuery 的所有功能都会丢失。

要解决此问题，您可以使用 WebSharper 的资源系统，而不是在 html 文件中手动包含 jQuery、TypeAhead 和 TagsInput：

为 TypeAhead 和 TagsInput 定义资源，指定它们依赖于 jQuery:

module Resources =
    open WebSharper.Core.Resources
    open WebSharper.JQuery.Resources

    [<Require(typeof<JQuery>)>]
    type TypeAhead() =
        inherit BaseResource("https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js")

    [<Require(typeof<TypeAhead>)>]
    type TagsInput() =
        inherit BaseResource("https://raw.githack.com/bootstrap-tagsinput/bootstrap-tagsinput/master/src/bootstrap-tagsinput.js")

指定您的 Ti 方法依赖于它们：

    type JQuery
    with
        [<Require(typeof<Resources.TagsInput>)>]
        [<Inline "[=11=].tagsinput({ typeaheadjs: { source:   }})">]
        member private this.Ti (findMatches: FuncWithArgs<string * (string [] -> unit), unit>) = X<unit>

从 index.html 中删除 jQuery、TypeAhead 和 TagsInput 脚本标记，因为如果页面包含调用 .Ti().[=24= 的代码，WebSharper 将自动添加它们]

外部 JS 库不适用于 Websharper 生成的标签

External JS library not applied to tag generated by Websharper

jquery

f#

websharper