title: Setting id and className dynamically in Backbone.js views
body: <p>I am in process of learning and using Backbone.js.</p>
  
  <p>I have an Item model and a corresponding Item view.
  Each model instance has item_class and item_id attributes, that I want to be reflected in as the 'id' and 'class' attributes of the corresponding view.
  What's the correct way to achieve this ?  </p>
  
  <p>Example:</p>
  
  <pre class="lang-js prettyprint-override"><code>var ItemModel = Backbone.Model.extend({      
  });
  
  var item1 = new ItemModel({item_class: "nice", item_id: "id1"});
  var item2 = new ItemModel({item_class: "sad", item_id: "id2"});
  
  var ItemView = Backbone.View.extend({       
  });
  </code></pre>
  
  <p>How should I implement the view so that the the views 'el's will translate to:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="id1" class="nice"&gt;&lt;/div&gt;
  &lt;div id="id2" class="sad"&gt; &lt;/div&gt;
  </code></pre>
  
  <p>In most examples I have seen, the view's <b>el</b> serves as a meaningless wrapper element inside which one has to manually write the 'semantic' code.</p>
  
  <pre class="lang-js prettyprint-override"><code>var ItemView = Backbone.View.extend({
     tagName:  "div",   // I know it's the default...
  
     render: function() {
       $(this.el).html("&lt;div id="id1" class="nice"&gt; Some stuff &lt;/div&gt;");
     }       
  });
  </code></pre>
  
  <p>So when rendered, one gets </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt; &lt;!-- el wrapper --&gt;
      &lt;div id="id1" class="nice"&gt; Some stuff &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But this seems like a waste - why have the external div ?  I want the <b>el</b> to translate directly into the internal div!</p>