javascript - Qlik Sense mashup RequireJS 添加 js 文件给出错误 'not a function'

Question

所以我以前从未使用过 requireJS，但因为 Qlik Sense 将其用于混搭，所以我必须以某种方式尝试。

我刚刚做了一个简单的 bootstrap mashup，添加了 highcharts 库，并在主题网站上购买了一个 bootstrap 管理主题(名称 = Naut)。

我将我可以使用的所有内容从购买的主题移至简单的 Bootstrap 混搭(css、html、js)，然后我尝试修改 require.config

这就是我的 require.config 文件目前的情况。

请记住，jQuery 是 requireJS 文件中的默认设置(我认为 Qlik Sense 的开发人员已默认采用这种方式)。

    var config = {
        host: window.location.hostname,
        prefix: "/",
        port: window.location.port,
        isSecure: window.location.protocol === "https:"
    };

    require.config( {
        baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port: "") + config.prefix + "resources",
        paths: {
            bootstrap: "/extensions/fitcloud/js/vendor/bootstrap.min",
            bootstrapSwitch: "/extensions/fitcloud/js/vendor/bootstrap-switch.min",
            highcharts: "/extensions/fitcloud/js/vendor/highcharts",
            senseutils: "/extensions/fitcloud/js/vendor/senseUtils",
            treefy: "/extensions/fitcloud/js/vendor/bootstrap-treefy.min",
            mainsc: "/extensions/fitcloud/js/main",
            vendor: "/extensions/fitcloud/scripts/vendor",
            plugins: "/extensions/fitcloud/scripts/plugins",
            main: "/extensions/fitcloud/scripts/main"
        },
        shim: {
            bootstrap : {
                deps : ['jquery']
            },
            bootstrapSwitch : {
                deps : ['jquery']
            },
            highcharts : {
                deps : ['jquery'],
                exports: 'Highcharts'
            },
            treefy : {
                deps : ['jquery']
            },
            mainsc : {
                deps : ['treefy']
            },
            senseutils : {
                deps : ['bootstrap']
            },
            vendor : {
                deps : ['jquery']
            },
            plugins : {
                deps : ['vendor']
            },
            main : {
                deps : ['plugins']
            }
        }
    } );

    require( ["js/qlik"], function ( qlik ) { qlik.setOnError( function ( error ) { alert( error.message ); } );
        require(["jquery", "bootstrap", "bootstrapSwitch", "highcharts", "senseutils", "treefy", "mainsc", "vendor", "plugins", "main"], function (jq, bs, bss, hs, su, tf, ms, ve, pl, ma) {

var app = qlik.openApp('test.qvf', config);


// All the rest of my javascript code goes in here

});

js 文件 vendor、plugins & main 是我购买的主题中的 javascript 文件。当我将它们放入 require.config 和 require 时，我开始收到错误 TypeError: $(...).highcharts is not a function & TypeError: $(...).bootstrapSwitch is not a function 并且我的应用程序已损坏，没有加载图表，并且 bootstrapSwitch 按钮无法正常工作。如果我删除它们，一切都会正常工作，除了我没有主题所具有的交互性(关闭侧边栏，弹跳菜单，...)。

我做错了什么，或者可能是某些函数名称在多个库中使用？

Answer 1

你的扩展的开始应该是这样的(属性，qlik，jquery，总是需要 js 依赖项，之后是可选的，但你可能需要

define(["./properties", "qlik","jquery","highcharts", "bootstrapSwitch"], 
    function(Props, qlik,$,highcharts,boostrapswitch) {

为了解释一下，它首先使用这部分定义加载实际文件(["./properties", "qlik","jquery","highcharts", "bootstrapSwitch"],

这就是告诉 Qlik 要引入哪些 JS 文件(您实际上不需要在文件后面添加 put.js。

当您没有正确地将这些 js 文件中的内容传递给函数时，就会发生您所描述的错误。这是在第二部分中完成的..

    function(Props, qlik,$,highcharts,boostrapswitch) 

您会看到有 5 个参数，因为您最初传递了 5 个 js 文件。

您需要确保两个部分的顺序相同。

这是 Qlik Sense 扩展的示例，我建议您检查properties.js 和 TalkToQlik.js 以了解其外观。 https://github.com/cookiejest/TalkToQlik

以下是该扩展的一些说明: http://webofwork.com/qlik-sense-voice-control-extension-for-accessibility/