CODEWITHSUNDEEP
javascriptjquerydombackbone.js
Denny
Denny

Reputation: 89

backbone.js - How are models/views linked to DOM element?

I'm just playing around with backbone.js and some jQuery magic to prepare for some upcoming projects.

One test case contains a table whose rows are rendered by a backbone view. They get perfectly re-rendered on value change. Afterwards the whole table is sorted by an jQuery plugin (Animated Table Sort), rows move to new positions. In fact, this process works once, but the next time, rows appear twice, everything ends up in chaos.

Is it possible, that the link between DOM element and backbone view can't handle such an change? Are there any workarounds?

Upvotes: 4

Views: 2389

Answers (3)

Denny
Denny

Reputation: 89

Thanks for your answers. Indeed, the table sorter does a lot that makes it difficult fpr backbone to maintain bindings. I've switched over to the great Quicksand plugin which uses a hidden list to animate changes in another (visible) list. Fits better to backbone.js.

Upvotes: 1

tbeseda
tbeseda

Reputation: 1857

Your collection maintains an order for your models, and therefor your corresponding views. If an outside force (like a jQuery table sorting plugin) modifies the order of the views, this change is not inherently reflected in the Backbone collection, so things are quickly out of sync.

Also, if the table sorter clones elements and removes the original, Backbone would likely lose track of the views and end up recreating them.

Upvotes: 0

JoshRivers
JoshRivers

Reputation: 10290

When you're developing with a Model/View framework like backbone.js or knockout.js, I find that you need to re-arrange your thinking and implementations to make changes to what is diplayed (like sorting) to the Model, and not allow them to happen in the view (like using a jquery plugin).

If you do end up using a view-side script to do something fancy (animations are a good example), then it is up to you to make sure the model is updated correctly, either by disabling or extending the binding.

Also note that according to the documentation, that animated sort plugin removes your table rows from the DOM, adds them to new DIVs, animates them, removes them from the DIVs, and restores them to the table. I'm wondering if after this is all done, backbone has lost track of those TDs, and when it re-renders after the change, it's just adding a new set since the last set is 'gone'.

Upvotes: 3

Related Questions