Using jQuery breaks stache livebinding

I recently discovered this project in my search for an MVC Framework and am currently experimenting with the alpha3.

So far I’m loving it, but trying to use a jquery-ui widget I noticed that when I manipulate the dom using jquery directly, it breaks stache livebinding accross the app.

Is there any way to call for example $(this.element).draggable() and still retain the {{foo}} livebinding?

This sounds like a bug. Any chance you have the code publicly hosted (e.g. GitHub) or can you reproduce this issue in a JS Bin?

Here’s a starter JS Bin with CanJS 3: http://jsbin.com/safigic/7/edit?html,js,output

Also, I haven’t used jQuery UI’s draggable features before but jQuery++ has definitely worked for me: http://jquerypp.com/#drag

Does .draggable mutate the DOM? If it does, it will kill the bindings on any DOM it mutates. There’s little we can do to fix this. If you create an example, I can show you how to work around it.

Modify the state instead of the DOM. Using drag.ghost() during draginit makes this easier, as it would prevent any side-effects applied by draggable.

If you use something like Velocity to do the animations, you can use { duration: 0, queue: false } to apply translates smoothly during dragging, and then add a duration otherwise, thus allowing a single event on a translate state to facilitate many animation use cases (draggable, snappable, resettable, etc).

At a high level, you want event streams that mutate state, and state changes that update DOM.

Thanks for getting back to me, was a busy week so I couldn’t follow up.

I ended up using can/stache to implement the draggable behaviour, wich was really straight forward.

I’ll try to compose a few JSBins for this and other things I noticed this weekend, I’ll be back :slight_smile:

1 Like