Knockstrap 弹出窗口不适用于 require.js

Question

我正在尝试引入一些 bootstrap 3 元素，特别是 alert 和 popover 到一个使用 knockout 的项目中，使用 knockstrap 来处理绑定。

警报和按钮元素按预期工作（并且证明 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 使用一些 mod（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);
});

进一步精简它，只剩下一个普通的 html 文件，其中只有最少的 js 文件，即从 Knockstrap 站点复制示例代码并排除 require.js 然后警报和弹出窗口工作。

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

Answer 1

根据 bootstrap 文档，弹出框组件需要 javascript 到运行正确。因此，您必须在路径中加载 bootstrap.min.js 并使用垫片，以便在所有 jquery、knockout 和 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']
  }
}

Knockstrap 弹出窗口不适用于 require.js

Knockstrap popover not working with require.js

jquery

requirejs

knockout.js