我正在嘗試創建一個應用程序,用戶將能夠在區域內單擊並拖動來創建矩形。值得注意的是該區域是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不工作?