Question

我的应用程序使用jQuery中的html()方法加载html。我在回调函数tabs中运行通过RequireJS创建的模块switchScreenCallback()时遇到问题。我尝试了不同的变体，我不确定缺少的引用是否是由RequireJS或回调引起的。错误总是：

Uncaught TypeError: Cannot read property 'switchTab' of undefined

我正在寻找解决方案，如果需要，我可以提供更全面的代码示例。如何确保标签对象不是undefined？

main.js：

requirejs.config({
    paths: {
        'jquery': '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min',
        'jqueryui': '//code.jquery.com/ui/1.11.4/jquery-ui',
        'viewObject': 'view',
        'script': 'script',
        'tabs': 'tabs',
    },
    shim: {
        jqueryui: {
            deps: ['jquery']
        },
        jquery: {
            exports: '$'
        },
        viewObject: {
            deps: ['jquery', 'jqueryui','tabs'],
            exports: 'viewObject'
        },
        tabs: {
            deps: ['jquery', 'jqueryui'],
            exports: 'tabs'
        }
    }
});
requirejs(['script']);

view.js：

define(['jquery', 'jqueryui', 'tabs'], function($,tabs) {
    console.log("tabs test 1",tabs === undefined);// returns true
    function callWhenReady(selector, callback, scope, params) {
        if ($(selector).closest('body').length) {
            callback.call(scope, params);
        }
        else {
            setTimeout(function() {
                callWhenReady(selector, callback, scope, params);
            }, 1);
        }
    }
    var viewObject = {
        switchScreenCallback: function(event) {
            console.log("ViewObject: SwitchScreenCallback",event);
            console.log("tabs test 2",tabs === undefined);// returns true
            console.log("tabs test 3",event.data.tabs === undefined);// returns true
            tabs.switchTab(event.data.tab);
            //event.data.tabs.switchTab(event.data.tab);
        },
        switchScreen: function(event) {
            $('#maincontainer').load(event.data.screen + '.html');
            callWhenReady('#' + event.data.screen, viewObject.switchScreenCallback, viewObject, event);     
        }
    }
    return {
        "viewObject": viewObject
    }
});

tabs.js：

define(['jquery', 'jqueryui'], function($) {
    var tabs = {
        switchTab: function(tab) {
            $('#tabs').tabs('select', tab);
        }
    }
    console.log("tabs created");
    return {
        "tabs":tabs
    }
});

Answer 1

仔细看看view.js：

define(['jquery', 'jqueryui', 'tabs'], function($,tabs) {
    ...
});

您正在将3个依赖项'jquery', 'jqueryui', 'tabs'加载到2个变量($, tabs)中。因此tabs是jqueryui的结果，这是未定义的。 tabs的返回值未分配给任何内容。

尝试改为：

define(['jquery', 'jqueryui', 'tabs'], function($, dummy, tabs) {
        ...
    });

或只是更改依赖顺序：

define(['jquery', 'tabs', 'jqueryui'], function($, tabs) {
        ...
    });

供参考：你已经将jqueryui声明为tabs的依赖项（在垫片部分），并且他什么也没有返回，所以我没有看到任何理由再次在view.js中调用它（和如果你不在这个代码块中实际使用它，那么Jquery也是如此）

Answer 2

我认为这是问题所在：

define(['jquery', 'jqueryui', 'tabs'], function($,tabs) {

以上代码会将$分配给jquery，将jqueryui分配给tabs

将其更改为：

define(['jquery', 'jqueryui', 'tabs'], function($, $ui, tabs) {

RequireJS：无法在回调中读取未定义的属性

2 个答案: