Requirejs Backbone et jqueryui

Question

J'ai une application dans backbone, où lorsque je clique sur un élément en dehors de l'application, je crée à l'intérieur d'une div une autre div qui peut être glissée et redimensionnée. J'ai essayé ceci :

mon fichier de configuration de 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();
});

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

modèle :

<%
 _.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>
    <%
    }
}); %>

Je récupère cette erreur :

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

L'erreur est due, je pense, au fait que l'élément div est créé dynamiquement.
Alors comment puis-je associer draggable et resizable pour mon div ? Merci

Answer 1

Vous devrez définir un Cale pour jquery-ui car ce n'est pas un module AMD et il dépend de jQuery.

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