I'm writing an app that is a 'power meter' of sorts where I show a list of 'locations' in the navigation that have a power rating associated with them, and a gauge that aggregates this information. Locations can be nested. Clicking a location changes my app's 'state' and loads its child locations into the nav. Clicking back takes user to previous locations listing.
Currently I poll for new power ratings (will look into a better solution later but this is just a proof of concept) then I regenerate my navigation view using a template and something similar to $(nav).html(someHtml)
I'm using event delegation, so I don't need to rebind events on my locations on state change.
So, currently I'm overwriting the view each time I get a new set of data. I'm not sure if there are performance ramifications to this, but there are certainly functional ramifications. For instance, sometimes my list of locations exceeds my navigational space, so I scroll (overflow:auto). When I update the view however, it resets the scrollTop of that div, which makes it unusable for someone scrolling through a long list of locations. (as polling is on a 2 second interval for instance)
So, I'm looking for a solution that allows me to actually bind my JSON data to the dom elements for each location. Then when I poll, I can $.extend my existing data and have it automatically refresh the values in my view. Is this possible? I just found the jquery-datalink plugin but it seems to achieve that just for forms, I have no forms on this app.
I've never really used jQuery's data method, I don't even know if this is what I need, but basically I want something like this:
- When a location is clicked, trigger a state change that loads the new data and sets my polling url.
- First data load will generate the view (of new locations)
- Subsequent data loads (through polling) will simply update the dom elements with the appropriate data rather than regenerating the html
I'm all ears as to some possible solutions. Pseudo code and proof of concepts are gladly welcome as I'm fully capable of implementing a theoretical solution.
edit Bonus points for integrating this with a templating solution of your choice (jQuery.tmpl, or mustache etc...)