title: Updating Backbone.js View becoming a mess
body: <p>Given a model:</p>
  
  <pre><code>MyModel = Backbone.Model.extend({
    defaults: {
      name: '',
      age: -1,
      height: '',
      description: ''
    }
  });
  </code></pre>
  
  <p>and a View to render the model as a list:</p>
  
  <pre><code>MyView  = Backbone.View.extend({
    tagName: 'ul',
    className: 'MyView',
  
    render() {
      var values = {
        name: this.model.get('name'),
        age: this.model.get('age'),
        height: this.model.get('height'),
        description: this.model.get('description')
      }
  
      var myTemplate = $('#MyView-Template').html();
      var templateWithValues = _.template(myTemplate , values);
    }
  });
  </code></pre>
  
  <p>and a template loaded by the View:</p>
  
  <pre><code>&lt;script type="text/template" id="MyView-Template"&gt;  
    &lt;li class="name"&gt;&lt;%= name %&gt;&lt;/li&gt;
    &lt;li class="age"&gt;&lt;%= age %&gt;&lt;/li&gt;
    &lt;li class="name"&gt;&lt;%= height%&gt;&lt;/li&gt;
    &lt;li class="name"&gt;&lt;%= description%&gt;&lt;/li&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>everything works fine, although it is a contrived example, the real code has many, many more attributes in the model. The problem I'm experiencing is how to <strong>handle</strong> updates to the model. </p>
  
  <p>I create an HTML form which has an appropriate input element for each field. The form is modelled and loaded as a template:</p>
  
  <pre><code>&lt;script type="text/template" id="MyEditView-Template"&gt;  
    &lt;input type"text" value="&lt;%= name %&gt;" /&gt; &lt;br /&gt;
    &lt;input type"text" value="&lt;%= age%&gt;" /&gt; &lt;br /&gt;
    &lt;input type"text" value="&lt;%= height%&gt;" /&gt; &lt;br /&gt;
    &lt;input type"text" value="&lt;%= description%&gt;" /&gt; 
  &lt;/script&gt;
  </code></pre>
  
  <p>and loaded into a view:</p>
  
  <pre><code>MyEditView  = Backbone.View.extend({
        tagName: 'form',
        className: 'MyEditView',
  
        render() {
          var values = {
            name: this.model.get('name'),
            age: this.model.get('age'),
            height: this.model.get('height'),
            description: this.model.get('description')
          }
  
          var myTemplate = $('#MyEditView-Template').html();
          var templateWithValues = _.template(myTemplate , values);
        }
      });
  </code></pre>
  
  <p>When the user saves the form, the new values are set in the model (MyModel). However I do not want to re-render the entire original view, it takes too long and has many nested elements. I only want to update the HTML elements which have had their value changed in the model.</p>
  
  <p>The problem is how can I elegantly link a model's attributes to HTML elements, so that I can do the following to an <strong>already rendered view</strong>:</p>
  
  <ol>
  <li>Iterate over a model's attributes.</li>
  <li>Determine which attributes have been modified.</li>
  <li>Only update the UI for modified attributes.</li>
  <li>Hide UI for any previously rendered attributes which should no longer be shown.</li>
  </ol>
  
  <p>A the moment I have a rather ugly solution of a JavaScript lookup table (just an object) which maps an attribute name onto an HTML element string:</p>
  
  <pre><code>var AttributesMap = {
      name: {
          htmlRef: 'li.name',
          attributeName: 'name'
      },
      age: {
          htmlRef: 'li.age',
          attributeName: 'age'
      }
      ...
  }
  </code></pre>
  
  <p>This feels hacky and has resulted in some pretty bloated code.</p>