Jquery Draggable and Backbone.js getting reference to backbone model from inside the droppable success callback?

I've had this problem. I solved it thusly: Give the drop target a reference to the model collection. Set a property data-cid="Now you can look up the model in the collection from the $(ui.

Draggable). Data('cid') Since backbone asserts that CIDs are unique, you could even scan a collection of collections, in case there were multiple model classes you wanted to be trashable.

I've had this problem. I solved it thusly: Give the drop target a reference to the model collection. Set a property data-cid="" on the draggable.

Now you can look up the model in the collection from the $(ui. Draggable). Data('cid').

Since backbone asserts that CIDs are unique, you could even scan a collection of collections, in case there were multiple model classes you wanted to be trashable.

So I can get the item in the collection but what about getting the view model itself. Running collection. Remove(id) removes it from the collection but not my view.

– jdkealy Sep 7 at 5:23 1 Bind 'remove' event on the collection to your view's method that removes the view from the DOM. – kulesa Sep 7 at 6:46 1 You'll have to track the View, putting them into an array or an object tracked by CID. – Elf Sternberg Sep 7 at 14:26 Thanks a bunch.

This totally worked and is game-changing in the way I see javascript. :) – jdkealy Sep 7 at 21:19.

We solved this problem with a global property that is placed in the app-namespace, called dragging. As there is only one view being dragged at one time, the dragging view binds to the drag event and writes its own model into window.dragging. When it gets dropped on a droppable view, that view gets the current dragging-model via that dragging variable.

Btw that property can better be placed within the global accessible application namespace instead of directly adding it to window. This was App.View. Tool in our application.

Like this: dragging = null; draggableview = new Backbone.View. Extend({ //... initialize: function() { //... $(this. El).

Bind("dragStart", function() { window. Dragging = this. Model; }, this); //remove reference for garbage collection purpose $(this.

El). Bind("dragStop", function() { delete window. Dragging; }, this); }, }); droppableview = new Backbone.View.

Extend({ //... initialize: function() { //... $(this. El). Bind("drop", function() { var draggedmodel = window.

Dragging; delete window. Dragging; // for garbage collection purpose //do funky stuff alert("You dropped " + draggedmodel. Get('title') + " on " + this.el.

Get('title')); //... }, this); }, }).

I think I ran into the same issue; instead of adding meta-data to the element or storing it globally, I just stored a reference to the actual view itself on the DOM element, which then gives you access to the model, and any info you need from there. Window. MyDraggableView = Backbone.View.

Extend({ initialize: function(){ $(this. El).draggable(); $(this. El).

Data("backbone-view", this); } }); window. MyDropTarget = Backbone.View. Extend({ initialize: function(){ $(this.

El). Droppable({ drop: function(ev, ui){ // get reference to dropped view's model var model = $(ui. Draggable).

Data("backbone-view"). Model; }, }); }, }).

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.