Question

我试图引入一些bootstrap 3元素，特别是警告和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中收到的错误是：＆＃34; .xxxxx不是函数＆＃34;

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必须不同，主要不是必需的）才能要求在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文档，popover组件需要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 popover无法使用require.js

1 个答案: