Requirejs 백본 및 jqueryui

Question

나는 백본에서 응용 프로그램 외부의 요소를 클릭하면 해당 div 내에서 draggable 및 resizable 수있는 다른 div 만들려면 응용 프로그램이 있습니다. requirejs의

내 config 파일 : 나는이 시도

require.config({ 
    paths:{ 
     jquery:'libs/jquery/jquery-2.0.2.min', 
     underscore:'libs/underscore/underscore-min', 
     backbone:'libs/backbone/backbone-min', 
     text:'libs/require/text', 
     jquery_ajaxform : 'libs/jquery/jquery.form', 
     jquery_ui : 'libs/jquery/jquery-ui-1.10.3.custom.min'  
    }, 
    shim: { 
     jquery: { 
      exports: '$' 
     }, 
     underscore: { 
      exports: '_' 
     }, 
     backbone: { 
      deps: ["underscore", "jquery"], 
      exports: "Backbone" 
     } 
    } 
}); 

require(['views/design'], function(DesignView){ 
    var designView = new DesignView(); 
}); 

내 DesignView :

define(['jquery' , 
     'backbone', 
     'jquery_ui', 
     'models/design', 
     'collections/design', 
     'views/element', 
     "text!templates/design.html" 
     ], 
    function($, Backbone, jQueryUI, DesignModel, DesignCollection, ElementView, tmplDesign){ 
    var DesignView = Backbone.View.extend({ 
     initialize: function(){ 
      this.$el = $('#layout'); 
      this.template = tmplDesign; 
      console.log('initialize DesignView'); 
      this.collection = new DesignCollection(); 
      var here = this; 
      $('#insert-dynamic-element').click(function(){ 
       var element = { name:'img', type:'image' }; 
       here.collection.addElement(element); 
       here.render(); 
       $('.drag-item').draggable({"containment" : "parent"}) 
      }); 
     }, 
     render: function(){ 
      var template = _.template(this.template, {elements:this.collection.toJSON()}); 
      this.$el.empty(); 
      this.$el.append(template); 
     } 
    }) 

    return DesignView; 
}); 

템플릿 :

:

<% 
_.forEach(elements, function (element, index) { 
    if(element.type == 'image'){ 
     console.log('fai'); 
    %> 
    <p>fsfdsfds</p> 
     <div class="insert-container-img drag-item"> 
      <p>IMG</p> 
     </div> 
    <% 
    } 
}); %> 

내가이 오류를 검색

Uncaught TypeError: Object [object Object] has no method 'draggable' 

div 요소가 동적으로 생성 되었기 때문에 오류라고 생각합니다.
그런 다음 어떻게 내 div에 드래그 가능하고 크기 조정할 수 있습니까? 감사합니다

Answer 1

jquery-ui는 shim을 정의해야합니다. AMD 모듈이 아니며 jQuery에 의존하기 때문입니다.

shim: { 
    //... 
    jquery_ui: { 
    exports: '$', 
     deps: ['jquery'] 
    } 
}