0

所以我以前从未使用过 requireJS，但因为 Qlik Sense 将它用于它的混搭，我不得不以一种或另一种方式尝试它。

我刚刚做了一个简单的引导程序混搭，添加了 highcharts 库并在主题网站上购买了引导程序管理主题（名称 = Naut）。

我将所有可以使用的东西从购买的主题转移到简单的引导程序混搭（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 按钮无法正常工作。如果我删除它们，一切正常，除了我没有主题所具有的交互性（关闭侧边栏，弹跳菜单，...）。

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

4

1 回答 1

2

您的扩展程序的开始应该如下所示（属性、qlik、jquery，之后总是需要 js 依赖项是可选的，但您可能需要

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

为了解释，它首先在实际文件中加载这部分定义（[“./properties”，“qlik”，“jquery”，“highcharts”，“bootstrapSwitch”]，

那就是告诉 Qlik 要引入哪些 JS 文件（您实际上不需要在文件之后放置.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/

于 2016-01-24T19:37:08.400 回答