更新骨架.js集合，而无需重新呈现模板

Question

Say I have five ranks, and different data points about each rank (salary, number, average, etc.). I build a collection of models, one model for each rank.

Then I have a Rank view and an App view - rendering down five Rank views inside my App view. I also need to put a d3 chart inside each one of those rank views.

SO far, no problems. But then I choose a button, update my collection with new data, and I have to re-render each Rank view to display the new data in my collection, correct? Re-rendering the data would rebuild the d3 chart each time, which I don't want to do, because I want the chart to have transitions.

Can anyone give me a little guidance? Not code necessarily, just possible solutions?

Answer 1

You can simply update values and re-animate them at will. There's no need to fully destroy the object and create a new one, though that's a shortcut you see taken often because it is scary simple....but it also introduces display issues at the same time.

Here's a simple example of changing values of a table and re-animating instead of destroying and making new: D3 redraw example You obviously get your data very differently via Backbone models, but the concepts are the same.

I have a similar pattern as you in my lighting control app, and I really have grown fond of using a grid to render the collection, with links to open each of the individual views, whether via a link to a new page (my preferred method) or a modal (the bosses' favorite method) My current grid of choice is Backgrid.js which is tied directly to the collection and therefore requires no work at all to update on model change.