在可拖動骨幹視圖的上下文中傳遞'drop'並將ui.position傳遞給它

我正在嘗試使用主幹& jQuery爲原型應用製作模型應用程序。在這一點上它非常小巧。 http://jsfiddle.net/IgnorantUser/u7JkX/在可拖動骨幹視圖的上下文中傳遞'drop'並將ui.position傳遞給它

我只有2個型號Canvas和ButtonWidget。還有3個視圖：用於畫布的CanvasView，用於ButtonWidget的ButtonInCanvas視圖和稱爲ButtonInToolbar的虛擬視圖，它不受ButtonWidget模型的支持，而是從.button css類獲取它的默認值，並用於拖動&放入畫布，用按鈕填充它。

因爲還有其他的部件（標籤，文本框，圖片處理等）我已經採取了在「ButtonInToolbar」視圖的上下文中傳遞由「CanvasView」觸發的拖放事件處理的方法，由使用下面的代碼：

passDrop: function (e, ui){ 
     if ($(ui.draggable).parent().is('#toolbar')){ 
      ui.draggable.trigger('drop'); //sets the drop in the context of the dragged view (ButtonInToolbar) 
     }

我現在面臨的問題是，我想能夠在ui.position.left和ui.position.top值傳遞到ButtonInToolbar觀點，以至於當我調用dropHandler方法追加一個新ButtonInCanvas視圖，我可以通過放置的位置並將其實際放置的按鈕渲染。 我該怎麼做？

dropHandler: function() { 
     $('.canvas').append(new ButtonInCanvas({model: new ButtonWidget}).render().el); 
    }

我已經試過路過(event, ui)上述功能中，這樣我可以有ui.position.left的價值，但我得到「遺漏的類型錯誤：無法讀取的未定義的屬性‘位置’」。我怎麼能解決這個問題？

此外，在上面的代碼中，我使用畫布的選擇器而不是CanvasView實例。考慮到將來會有不止一個CanvasView，我如何關聯特定的CanvasView實例，以便Widgets僅附加到它而不是所有具有一類畫布的DOM元素？

更重要的是，由於這是我第一次嘗試使用Backbone，並且它與「ToDo」應用程序沒有太多共同之處，您能否指出我的實現中的任何致命錯誤？事情我做錯了，我也可以更好/更有效的方式做了

來源

2013-01-10 IgnorantUser

從jQuery .trigger() docs：

.trigger(eventType [, extraParameters ]) 
eventType Type: String A string containing a JavaScript event type, such as click or submit. extraParameters Type: Array, PlainObject Additional parameters to pass along to the event handler.

所以，你可以通過你的.trigger()功能所需的任何其他參數：

passDrop: function (e, ui) { 
    if ($(ui.draggable).parent().is('#toolbar')) { 
     var offset = this.$el.offset(), 
      top = ui.offset.top - offset.top, 
      left = ui.offset.left - offset.left; 
     ui.draggable.trigger('drop', [top, left]); 
    } 
}

並處理回調額外的參數：

dropHandler: function (event, top, left) { 
    var el = new ButtonInCanvas({model: new ButtonWidget}).render().el; 
    $(el).css({position: "absolute", top: top, left: left}); 
    $('.canvas').append(el); 
}

此外，以下內容添加到您的CSS：

.canvas { 
    position: relative; 
}

見updated fiddle。

來源

2013-01-10 13:15:13 Lukas

Thanx！任何想法如何傳遞這些值時，我做$（'。canvas'）。append（new ButtonInCanvas（{model：new ButtonWidget（}）。render（）。el）;嘗試過各種東西，但沒有工作 – IgnorantUser

I已經更新了答案和小提琴，請檢查一下 – Lukas

太棒了，雖然我想通過我的模型屬性positionx和positiony中的ui.position或ui.offset，或者如果這不可行，請通過ui.position /ui.offses到ButtonInCanvas視圖，然後從那裏到模型 – IgnorantUser

盧卡斯我無法對你給予我的幫助足夠感謝！:) 在我設法用你的碼位傳遞結束的偏移量視圖構造

$('.canvas').append(new ButtonInCanvas({ 
    model: new ButtonWidget, 
    xpos:left, 
    ypos:top 
    }).render().el);

然後我在ButtonInCanvas初始化用於model.options設置放下位置值代入模型本身：

initialize: function(){ 
_.bindAll(this, 'render', 'setCssStyle', 'setPosition'); 
this.model.set({ 
    'positionx': this.options.xpos, 
    'positiony': this.options.ypos 
})

最後，我提出的方法通過從模型獲取position x/y設置的CSS頂部/寬度。我把這個方法裏面的render function

setPosition: function() { 
    this.$el.css({ 
    left: this.model.get('positionx') + 'px', 
    top : this.model.get('positiony') + 'px', 
    position: "absolute" 
    }); 
},

而且，我已經更新了的jsfiddle http://jsfiddle.net/IgnorantUser/u7JkX/

現在我需要讓我的周圍全追加頭在畫布的具體實例，而不是$(.canvas)。我猜cid會做的伎倆！激動！

來源

2013-01-11 10:06:57 IgnorantUser

不知何故，我錯過了你提到的有關'$（「。canvas」）''與你正在處理的特定畫布的問題的部分，我已經更新了小提琴的修補程序：http://jsfiddle.net/u7JkX/34/ – Lukas

基本上，你實例化'CanvasView'，並將它的'$ el'傳遞給你創建的每個'ButtonInToolbar'視圖。 – Lukas

我正在考慮將Canvas模型cid作爲id屬性傳遞到canvasview，所以我c然後應該使用setDrop來傳遞dropHanlder中的cid，並將其用作jQuery選擇器來呈現該特定canvasview中的按鈕。不幸的是，這個選項在init之前不起作用：/（或者我做錯了什麼）您可以評論jsfiddle只是爲了幫助我理解你做了什麼嗎？再次感謝你！ – IgnorantUser

在可拖動骨幹視圖的上下文中傳遞'drop'並將ui.position傳遞給它

回答

相關問題