In ember, how do I pass view data from a drag into a drop?

Question

I'm using ember latest and jquery.ui's Draggable and Droppable. I am also using some mixins that a talented ember person created to make a Draggable and Droppable view in ember. Here's the fiddle:

http://jsfiddle.net/inconduit/6n49N/7/

I need to attach the view's content to the drag event so that I can access it in the drop event. With straight up jquery, I know you'd do $(..).draggable({ .. }).data("myData","some data here"); but I don't know how to reference the view's content in this ember implementation.

Here's a snippet from App.Draggable in the fiddle:

  App.Draggable = JQ.Draggable.extend({
     appendTo: 'body',
     helper: function() {
          $(this).data("myData","this is where actual data would go");

JQ.Draggable extends Ember.View. Inside the helper() function, 'this' refers to the actual DOM element, I don't know how to refer to the View's variables. I want to pass the view's content so that it can be retrieved here:

  App.Droppable = JQ.Droppable.extend({
      drop: function(event,ui) {
          alert('Dropped! ' + $(ui.draggable).data("myData"));

The template for the draggable looks like this:

  {{#view App.Draggable contentBinding="App.anObject"}}Drag me{{/view}}

and I would like to pass that content. Please have a look at the fiddle, the pertinent functions are defined at the bottom of the javascript.

Adam Krawesky Adam Krawesky · Accepted Answer · 2012-10-04T14:38:38

answering my own question here.

i attached the data in the didInsertElement callback as follows:

App.DraggableDataView = App.Draggable.extend({
    didInsertElement: function() {
        this._super();
        var element = this.get('element');
        $(element).data('myData',this.get('content'));
    },
});

In ember, how do I pass view data from a drag into a drop?

1 Answers