Question

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

我的目录结构是这样的

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)(…)

配置：

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;
        }
    });
})

Answer 1

错误来自line 85 of Fancytree：

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

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

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

这是必要的，因为Fancytree未定义为模块并且依赖于全局变量。大多数图书馆现在使用类似UMD (Universal Module Definition)的内容。

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

1 个答案: