在fancytree插件的require.js配置中加载jquery-ui时出错

问题描述

我正在尝试加载一个名为 fancytree 的jQuery控件，该控件取决于 jquery-ui .我收到一个错误消息，说它没有从我给定的路径中加载jquery-ui. Fancytree还依赖于另一个名为fancytree.table的文件.

I'm trying to load a jQuery control called fancytree and this control depends on jquery-ui. I'm getting an error saying that it hasn't loaded jquery-ui from the path I've given. Fancytree also depend on another file called fancytree.table as well.

我的目录结构是这样的

js
    /app
        ....
    /lib
        /jquery
        /underscore
        /backbone
    /vendor
        /jquery-ui
        /fancytree

错误:

jquery.js:2 Uncaught Error: Fancytree assertion failed: Fancytree requires jQuery UI (http://jqueryui.com)(…)

config:

require.config({
    // The shim config allows us to configure dependencies for
    // scripts that do not call define() to register a module

    paths: {
        'jquery': '../lib/jquery/jquery',
        'underscore': '../lib/underscore/underscore',
        'backbone': '../lib/backbone/backbone',     
        'text': '../lib/text/text',
        'jquery-ui': '../vendor/jquery-ui/jquery-ui',
        'fancytree': [      
            '../vendor/fancytree/fancytree',
            '../vendor/fancytree/fancytree.table'
        ],      
    },
    shim: {

        underscore: {
            exports: '_'
        },
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        },
        'jquery-ui': {
            exports: "$",
            deps: ['jquery']
        },      
    },
    baseUrl: '/js/app',

});

视图:

define(['jquery-ui', 'fancytree', 'require'], function(ui, fancytree, require){

    'use strict';

    var $ = require('jquery'),
        _ = require('underscore'),  
        Backbone = require('backbone'),
        tpl = require('text!templates/categories.html'),
        template = _.template(tpl);


    return Backbone.View.extend({
        el: $('#tree'),
        initialize: function() {

            this.listenTo( this.collection, 'reset add change remove', this.render, this );
            this.collection.fetch();
        },
        initFancyTree: function() {
            console.log('tree');
            $('#fancytree').fancytree();

        },
        render: function() {                
            this.$el.html(template());
            //this.initFancyTree();
            return this;
        }
    });
})

推荐答案

错误来自 Fancytree的第85行:

_assert($.ui, "Fancytree requires jQuery UI (http://jqueryui.com)");

要解决此问题，请为fancytree添加垫片:

To solve that, add a shim for fancytree:

'fancytree': {
    deps: ['jquery-ui']
}, 

这是必需的，因为Fancytree没有定义为模块，而是依赖于全局变量.现在大多数库都使用 UMD(通用模块定义).

This is necessary because Fancytree is not defined as a module and depends on globals. Most library now uses something like UMD (Universal Module Definition).

这篇关于在fancytree插件的require.js配置中加载jquery-ui时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！