CODEWITHSUNDEEP
jquerydata-binding
brad
brad

Reputation: 32355

jQuery binding data with view

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:

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...)

Upvotes: 4

Views: 2275

Answers (3)

brad
brad

Reputation: 32355

http://documentcloud.github.com/backbone/

Upvotes: 1

Tauren
Tauren

Reputation: 27245

There are now official jquery plugins that provide data linking and templating. See what John Resig has to say about it all. Also, there are some other resources that you might be interested in:

My application has the same types of requirements that yours does, so I'm very eager to find a good solution as well. I haven't tried jquery data linking yet, but plan to as soon as time allows. But I'm not sure if it will be robust enough to meet my quite complex needs.

What really interest me is doing databinding in an event-driven manner. Basically, the view would listen for "model-change" and "collection-change" events and would update itself accordingly. When a model is changed, an event would get thrown. A view component sees that event and updates itself.

A while back I spent a bunch of time working on an event driven databinding system like this. I got it probably 75% done, but then had to get back to real work. It turned out to be quite complex because it had to handle lots of scenarios. And I was essentially creating a data management system that wrapped JSON objects with Models and Collections. That was necessary in order to be able to detect when values changed and throw events. For instance:

  • A single existing data element is updated, so update everywhere in the view where that data model has been rendered. For instance, the currently logged in user can see their name both in the "Welcome Tom Smith" component at the top of the page, in a list of "currently logged in users" (an item in a collection), and in a "My Profile" panel. If Tom changes his name, the change should show up everywhere.
  • A collection of elements has been modified, so need to show current state of collection. Easiest to just re-render the whole collection in the view, but then any existing state is lost (such as scroll position, hidden/shown divs, etc.). Better solution is to add new elements, remove old elements, and update existing elements that have changed in the view without refreshing the entire view. This becomes a data management nightmare, keeping track of dirty models, dirty collections, and such.
  • Needs to make sure to update each view component only once on a model change. If a collection is dirty and an item in the collection is dirty, don't refresh the entire collection and then also refresh the item within it.
  • Needs to be generic and work with any sort of view.
  • What about pagination of data? If the view is showing items 1-50 on page 1, and 5 items are removed from the data collection model, should an AJAX request be made to the server to get 5 additional items to keep the view showing 50 items?

Someday I'll get back to that project, as I put a lot of time into it. But first I'll by trying out the jquery datalinking project. Maybe they've already solved all this. I'd love to hear any feedback from you if you use it.

So how about those bonus points you mention? :)

Upvotes: 1

mpapis
mpapis

Reputation: 53178

You could use jQuery pure html templates for this.

Upvotes: 0

Related Questions