时间戳

首页 > 解决方案 > 外部 JS 库不适用于 Websharper 生成的标签

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

问题描述

根据这篇文章： F# 中带有 WebSharper 的外部 JS 库

并在此处集成实现： 使用 WebSharper 中的 Bootstrap-taginput 和 typeahead.js 标记输入并提前键入。

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

我的测试代码在这里

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

在此处输入图像描述

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

标签： jqueryf#websharper

解决方案

问题是您将 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 "$0.tagsinput({ typeaheadjs: { source: $1  }})">]
        member private this.Ti (findMatches: FuncWithArgs<string * (string [] -> unit), unit>) = X<unit>
  • 从 index.html 中删除 jQuery、TypeAhead 和 TagsInput 脚本标签，因为如果页面包含调用.Ti().

推荐阅读