requirejsにはjqueryコントロールの複数の拡張が含まれています

Question

'fancytree'というjqueryコントロールの他の拡張機能をロードするにはどうすればいいですか？fancyteeを読み込んで、fancytree.table.jsやその他の拡張機能を必要としています。私の設定

require.config({ 

    shim: { 

     underscore: { 
      exports: '_' 
     }, 
     backbone: { 
      deps: [ 
       'underscore', 
       'jquery' 
      ], 
      exports: 'Backbone' 
     }, 
     'jquery-ui': { 
      exports: "$", 
      deps: ['jquery'] 
     }, 
     'fancytree': { 
      deps: ['jquery-ui'] 
     }, 
     'alertify': { 
      deps: ['jquery'] 
     }, 
     'fancytreetable': { 
      deps: ['jquery', 'fancytree'] 
     } 
    }, 

    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'/* this extension here needs to be added but it's not included */ 
     ],   
     'alertify': '../vendor/alertify/alertify'  
    }, 

    baseUrl: '/js/app', 

}); 

Answer 1

Nikhil Mehta's commentあなたは正しい方向を指しています。 pathsの値がfancytreeの場合は間違っています。モジュールのフォールバック値を提供する場合は、配列を使用します。たとえば[A, B, C]を指定した場合、Aがロードされない場合、RequireJSはBを試行し、失敗した場合はCを試行します。そしてすべてが失敗したら、それは負荷の失敗です。

あなたが示した構成に基づいて、必要があるでしょう：

fancytree: '../vendor/fancytree/fancytree', 
fancytreetable: '../vendor/fancytree/fancytree.table' 

あなたはすでにそのfancytreetableニーズfancytreeを確立shimを持っています。

かなり古いバージョンのアンダースコアとバックボーンを使用している場合を除き、shimの値を指定する必要はありません。 RequireJSはおそらくそれらを無視するだけですが、あなたのコードを読んでいる人を混乱させるかもしれません。

Answer 2

個々の拡張機能で作業するには、多くのシミングが必要になるため、ここではどのように動作させるか、AMDがサポートするjquery.fancytree-allと最新のjquery-uiが必要です。

onBuildWriteは任意ですが、私はこの方法だけで最小限のコードを記述するために、開発者の便宜のために

requirejs.config({ 
    paths: { 
    'jquery': './js/vendor/jquery', 
    'jquery-ui': './js/vendor/jquery-ui', 
    'jquery.fancytree': './js/vendor/fancytree/jquery.fancytree-all' 
    }, 
    shim: { 
    'jquery.fancytree': { 
     deps: ['jquery', 'jquery-ui/core', 'jquery-ui/effect', 'jquery-ui/effects/effect-blind', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable'], 
     exports: 'jQuery.fn.fancytree' 
    } 
    }, 
    onBuildWrite: function (moduleName, path, contents) { 
    'use strict'; 
    if (moduleName === 'jquery.fancytree') { 
     contents = 'define("jquery.fancytree", ["jquery", "jquery-ui/core", "jquery-ui/effect", "jquery-ui/effects/effect-blind", "jquery-ui/widgets/draggable", "jquery-ui/widgets/droppable"], function(jQuery) { ' + contents + '});'; 
    } 
    return contents; 
    } 
}); 

// usage 
define([ 
    'jquery', 
    'jquery.fancytree', 
    'css!./css/fancytree/skin-custom/ui.fancytree.css', 
    ], 
    function($) { 
    'use strict'; 
    // 
    $('#tree').fancytree({ 
     checkbox: true, 
     source: [{title: 'Node 1'}, {title: 'Node 2',key: 'id2'}] 
    }); 
    // 
    }); 
//