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关联draggable和resizable呢？感谢

Answer 1

您需要为jquery-ui定义 shim ，因为它不是AMD模块，而且它依赖于jQuery。

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

需要Backbone和jqueryui

1 个答案: