Requirejs Backbone и jqueryui

Question

У меня есть приложение в позвоночнике, где, когда я нажимаю элемент вне приложения, я создаю внутри div другого div, который можно перетаскивать и изменять размер. Я попытался это:

мой конфигурационный файл requirejs:

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-интерфейса, так как он не является модуль AMD и это зависит от Jquery.

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