title: Backbone.js - relationship between a View and Model?
body: <p>I have a few different problems going on, I hope though this example is easy to follow. The code uses an HTML template with elements hidden by default (using CSS). The Backbone View uses data in a Model to display appropriate values OR hide the UI element if no value is present in the Mode.</p>
  
  <p>Given a template where everything is hidden by default (using CSS), for example:</p>
  
  <pre><code>&lt;script type="text/template" id="Person-Template"&gt;
      &lt;span class="fname" title="FirstName"&gt;&lt;/span&gt;
      &lt;span class="lname" title="LastName"&gt;&lt;/span&gt;
      &lt;span class="age" title="Age"&gt;&lt;/span&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>To hide each UI element the CSS is:</p>
  
  <pre><code>span.fname,
  span.lname,
  span.age {
      display:none; 
  }
  </code></pre>
  
  <p>My Backbone.js Model would therefore be:</p>
  
  <pre><code>PersonModel = Backbone.Model.extend({
          defaults: {
              fname: undefined,
              lname: undefined,
              age: undefined
          }
      });
  </code></pre>
  
  <p>The View (simplified) would be:</p>
  
  <pre><code>PersonView = Backbone.View.extend({
      tagName: 'div',
  
      initialize: function() {
          this.model.on("fname", this.updateFName, this);
          this.model.on("lname", this.updateLName, this);
          this.model.on("age", this.updateAge, this);
      },
  
      updateFName: function() {
          // Pseudo code 
          Get 'new' value from Model
          Obtain reference to DOM element span.fname
          Update span.fname
  
          if (model value is empty) {
             Hide UI element.
          }
      },
  
      updateLName: function() {
          // Same as above
      },
  
      updateAge: function() {
          // Same as above
      },
  
      render: function() {
          // Get model values to display
          var values = {
              FirstName : this.model.get('fname'),
              LastName : this.model.get('lname'),
              Age: this.model.get('age'),
          };
  
          // Load HTML template
          var template = $('#Person-Template').html();
  
          // Populate template with values
          var t = _.template(template, values);
  
         // Show / hide UI elements
         this.updateFname();
         this.updateLName();
         this.updateAge();
      }
  </code></pre>
  
  <p>}</p>
  
  <p>Finally, the question: It seems hacky calling each updateXYZ() method from render() just to determine whether the UI element should be set to hidden or visible. I have a lot of attributes in my model and the code just seems a little absurd really.</p>
  
  <p><a href="https://stackoverflow.com/questions/10474275/updating-backbone-js-view-becoming-a-mess">I have been told on SO</a> that the View should not be responsible for determining what should or should be displays. My questions is, well then what is responsible? The user may perform some (valid) aciton which clears the First Name, in which case I don't want my View displaying 'First name:' followed by no value.</p>