Using jQuery UI drag/drop with backbone.js

Question

One feature of my Backbone app involves associating models of type A with models of type B, which is done by dragging view A onto view B. In B's view class I listen for the drop event and from this I get the DOM element of view A, but no information about model A.

What's the best way to go about retrieving this information? My best guesses so far are

have model A save a reference to itself in the app's namespace, removing this reference on drag end if the drop handler hasn't already done so
fire an event on view A, passing a reference to model B along with the event, and then having model A call a method of model B...
store model A as a $.data attribute of view A

but all these approaches seem convoluted/inelegant.

If you can get the DOM element, is the DOM element associated with the id of the model in any way? Like the id of the element, or some data field you set on it? — kinakuta
– kinakuta, Commented Feb 22, 2012 at 23:01
Nope. This would be a reasonably good way to go about it, but I would prefer not to have to search by id when the model is already so intricately linked with the view - it seems wasteful to lose sight of the model and then have to find it again. — wheresrhys
– wheresrhys, Commented Feb 22, 2012 at 23:03
I know what you mean, but the interaction between the two models is kind of illusory - the models are just representations of data when in reality what's happening are DOM events firing. Getting the data from the DOM seems like a necessary step since the models aren't actually changing in any way. — kinakuta
– kinakuta, Commented Feb 22, 2012 at 23:38
@kinakuta One problem with the id method is that a model can be in 2 collections at once, so can have 2 views (in future there's some functionality I'd need this for). So it'd need to be stored in className, which would require some regex to get the id... not a big job, but gets further away from the tidiness I'm after. Although you're probably right in saying that because models and views aren't in reality all that tightly coupled I may be asking too much of backbone. Perhaps Backbone, where jquery is present, should by default store a model reference using $.data? — wheresrhys
– wheresrhys, Commented Feb 23, 2012 at 9:21

frontendbeauty · Accepted Answer · 2012-04-01 10:10:21Z

4

Storing as a data-attribute is actually quite clean, and the performance will not be bad. You can store the model's cid attribute as data-cid on the DOM el, and use the collection's getByCid method to retrieve the model.

answered Apr 1, 2012 at 10:10

frontendbeauty

2,1392 gold badges17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

joidegn · Accepted Answer · 2012-02-23 14:50:10Z

0

I think the cleanest way to go about it is as kinakuta mentioned in a comment to associate a dom element with the model using the id in e.g. a data-attribute.

This makes sense from an implementation point of view because it allows you to have a bidirectional dependency and you can reference one from the other easily later on when your application beccomes more complex.

Your mentioned solutions would work as well, however, I feel Solution A seems a little hackish, Solution B is less clean code wise and Solution C is essentially the same as using a data-attribute.

answered Feb 23, 2012 at 14:50

joidegn

1,0789 silver badges20 bronze badges

Collectives™ on Stack Overflow

Using jQuery UI drag/drop with backbone.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related