jQuery-ui可調整大小不能在Marionette.ItemViem上工作

我正在嘗試創建一個應用程序，用戶將能夠在區域內單擊並拖動來創建矩形。值得注意的是該區域是Marionette.CollectionView，並且用戶通過拖放鼠標按鈕創建了一個新的Rectangle model，該Rectangle model被添加到集合中（該集合負責渲染它）。jQuery-ui可調整大小不能在Marionette.ItemViem上工作

這裏的ItemView控件的代碼

var RectangleView = Backbone.Marionette.ItemView.extend({ 
    template: "<div> </div>", 
    className: "rectangle", 
    events: {}, 


    initialize: function(){ 
    this.$el.draggable({ 
     containment: 'parent' 
    }); 
    this.$el.resizable(); 
    this.setCssStyle(); 
    }, 

    setCssStyle: function (options) { 
    that = this; 
    this.$el.css({ 
     'width': that.options.width + 'px', 
     'height': that.options.height + 'px', 
     'top': that.options.top + 'px', 
     'left': that.options.left + 'px', 
     'border': '1px solid black', 
     'position': 'absolute' 
    }); 
    } 

});

內initialize方法我設置視圖的元件是draggable和resizable。儘管可拖動工作正常，但可調整大小根本不起作用。（我還包括必要的jquery-ui.css文件）

上面的ItemView在我將模型添加到CollectionView後立即追加（這發生在我的CollectionView的自定義事件上）這裏是CollectionView的代碼

var ScreenView = Backbone.Marionette.CollectionView.extend({ 
    template: "<div> </div>", 
    className:"screen", 
    itemView: RectangleView, 
    events: { 
    'boxmakerstoppeddrawing' : 'drawingHandler' 
    }, 

    initialize: function() { 
    this.$el.boxMaker(); 

    }, 

    itemViewOptions: function() { 
    return boxProperties; 
    }, 


    drawingHandler: function() { 
    var rectangle = new Rectangle(); 
    this.collection.add(rectangle); 
    } 
});

任何想法，我可能做錯了，導致.resizable不工作？

來源

2013-11-25 IgnorantUser

傻逼我！因爲我是通過用戶seutje在#jquery irc.freenode渠道告知，我應該附上了jQuery UI的方法onRender，而不是初始化

initialize: function(){ 
    this.setCssStyle(); 
    }, 

    onRender: function(){ 
    this.$el.draggable({ 
     containment: 'parent' 
    }); 
    this.$el.resizable(); 
    }

一切正常了，但我想這個反饋是否是最佳的。考慮到我附加了方法onRender，在調整大小期間ItemView被重新渲染，因此當調整項目大小時會調用onRender，並因此重新附加.draggable和.resizable？

來源

2013-11-25 12:41:32 IgnorantUser

jQuery-ui可調整大小不能在Marionette.ItemViem上工作

回答

相關問題