Knockstrap 弹出框不适用于 require.js

Posted 2023-03-27

【中文标题】Knockstrap 弹出框不适用于 require.js

【英文标题】：Knockstrap popover not working with require.js

【发布时间】：2018-09-10 21:51:13

【问题描述】：

我正在尝试将一些 bootstrap 3 元素，特别是 alert 和 popover 引入一个使用敲除的项目中，使用敲击带处理绑定。

警报和按钮元素按预期工作（并且证明 Knockstrap 已加载并在某种程度上工作），

<div class="alert" data-bind="alert: type: alertType, message: alertMessage "></div>

<button id="btnToggle" class="btn btn-info inline" data-bind="toggle: isToggled">Toggle button</button>

但是popover元素根本不起作用，我也尝试过类似缺乏成功的工具提示。

<button class="btn btn-primary" data-bind="popover: 
                options:  title: 'Popover with template', placement: 'bottom' ,
                template: popoverTemplate,
                data:  text: 'First template' 
            ">
            Click
        </button>

在这两种情况下，chrome 中收到的错误都是：“.xxxxx 不是函数”

TypeError: Unable to process binding "popover: function ()return 
                    options: title:'Popover with template',placement:'bottom',template:popoverTemplate,data: text:'First template' "
Message: h.popover is not a function

谷歌搜索让我怀疑我有重复的 jquery 版本（因为我在项目的其他地方使用 jquery）但是当我将我的项目提炼为基本元素时，我仍然收到相同的错误。 See my test page 带有一些 mods（baseUrl 必须不同，main 不是必需的）才能在 jsfiddle 中工作。行为或缺乏行为是一样的。

requirejs.config(
appDir: ".",
baseUrl: '../Scripts/js/lib',
paths: 
    /* Load jquery from cdnjs. On fail, load local file. */
    'jquery': ['//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min', '../../jquery-min'],
    /* Load knockout from cdnjs. On fail, load local file. */
    'knockout': ['//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min', 'knockout/knockout-min'],
    /* Load knockstrap from cdnjs. On fail, load local file. */
    'knockstrap': ['//cdn.jsdelivr.net/npm/knockstrap@1.4.0/build/knockstrap', 'knockstrap/knockstrap-min'],
    'main': 'main'

);

require(['knockout', 'knockstrap'], function (ko, knockstrap) 

    // adding knockstrap to dependancies works for alerts, not for popovers? (TypeError ... $element.popover is not a function, line 843)

    function PopoverExampleViewModel() 
        var self = this;

        // Tooltip bindings
        self.tooltipTitle = ko.observable('Observable title');
        self.tooltipPlacement = ko.observable('left');

        // Alert bindings
        self.alertMessage = ko.observable('Alert Test Message');
        self.alertType = ko.observable('info');

        // Popover bindings
        self.popoverTemplate = ko.observable('firstPopoverTemplate');
        self.switchTemplates = function () 
            self.popoverTemplate() === 'firstPopoverTemplate' ? self.popoverTemplate('secondPopoverTemplate') : self.popoverTemplate('firstPopoverTemplate');
        ;

        // Toggle Buttton bindings
        self.isToggled = ko.observable(false);
    
    var model = new PopoverExampleViewModel();
    ko.applyBindings(model);
);

进一步剥离它，仅包含最少的 js 文件的纯 html 文件，即从 Knockstrap 站点复制示例代码并排除 require.js，然后警报和弹出框都可以工作。

谁能帮我理解为什么警报有效而弹出窗口无效。或者在淘汰赛中提供弹出框的最佳解决方案是什么？非常感谢。

【问题讨论】：

你能创建一个小提琴来复制这个问题吗？

我的测试页面是一个jsfiddle页面jsfiddle.net/xpvt214o/17727

【参考方案1】：

基于 bootstrap 文档，popover 组件需要 javascript 才能正确运行。因此，您必须在路径中加载 bootstrap.min.js 并使用 shim，以便在加载所有 jquery、knout 和 bootstrap 时正确加载 knockstrap。

这里是修改后的 jsfiddle：https://jsfiddle.net/gbhkahmk/22/

paths:  
    ...,
    'bootstrap': ['//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min', '/libs/bootstrap-min']
,
shim: 
    bootstrap: 
    deps: ['jquery']
  ,
  knockstrap: 
    deps: ['knockout', 'jquery', 'bootstrap']