title: MVC-like UI updates in Javascript/jQuery: best practices?
body: <p>I'm coming across a bit of an awkward problem.  I have a Web page with quite a few buttons on it that need to be disabled and enabled at various points.  Now if this were a Swing (or any otehr desktop UI interface for that matter), it would be quite trivial: I would simply add listeners for the model changes I was interested in and update the UI accordingly.</p>
  
  <p>This is basic MVC stuff really.</p>
  
  <p>Thing is, I'm at a bit of a loss as to how to handle this nicely in Javascript.  I'm going down a route that will end up with some real spaghetti code where the click listeners for the buttons are updating the UI controls and that's just not going to end well.</p>
  
  <p><strong>EDIT:</strong> Let me give you a more concreate example.</p>
  
  <p><strong>Example</strong></p>
  
  <p>Imagine a screen that lists open orders.  Those orders are presented in a table as each row (order) has multiple attributes against it, such as who is currently managing the order, who made the order, what it's for, when the order was made and the status of the order.</p>
  
  <p>I've done it so you can select one (or more) of these orders by clicking on the rows.  This adds a "selected" class, which changes the styling, much like a list.</p>
  
  <p>As to the behaviour, if a user selects one order then certain actions become available, such as Open Order (to view the details), Take Owneship, Cancel and so on.  The attributes of the order may also affect what actions are available eg if the order is "owned" by somebody else already, certain actions will be disabled.</p>
  
  <p>Some of these options (like opening the order) aren't available if you've selected multiple orders.</p>
  
  <p>Additionally via a background Ajax call the list refreshes with new orders periodically.  The user can also click refresh or can filter the orders (by name, date range and so on) and then reload the orders.  While the orders are reloading certain buttons get disabled.</p>
  
  <p>I was going to do a second example but I think that one is sufficiently complex to illustrate the kind of problem.  Now I've started this by giving various controls classes.  For example, elements with the "select" class might be disabled/enabled/styled when an item is selected.</p>
  
  <p>Now this works reasonably well in simple cases but I'm running into problems where the state of a control depends on multiple conditions.  Also the classes are getting fractured by things like some elements want to be styled, some controls want to be disabled/enabled and in some cases both things need to happen.</p>
  
  <p>In Swing I tended to handdle this kind of thing by having a sort of updateUI() method, which would be called whenever the state of a relevant control or model was changed.  It would then set the state of all the controls explicitly.  Now this is arguably not the most efficient way (eg if you have 30 controls and only need to update one of them it's a bit of a waste) but I found the simplicity was worth it.  The alternative was that controls/models ended up with too information about what controls they depended on or those that depended on them.  It go tmessy from a coupling point of view.</p>
  
  <p>But I have no such (obvious) mechanism in Javascript.  Inobtrusive Javascript as advocated by jQuery is great because it stops random code snippets being littered throughout your code.  But I need to go a step further nad have some way of managing the complexity of this (because it is quite a complex screen and will only get more complex).</p>