title: How do I give Marionette templates data attributes?
body: <p>Here I am at the beginning of a project. I am using zurb-foundation and marionette. I have an element that is rendering a template that is supposed to be tabs. As it stands:</p>
  
  <pre><code>define([
    "backbone",
    "marionette"
  ], function(Backbone, Marionette) {
  
    MyItem = Backbone.Marionette.ItemView.extend({
      template: "#design-tabs",
      className: "section-container tabs",
  
      onRender: function() {
        $(this.el).foundation();
      }
    });
  
    return MyItem;
  });
  </code></pre>
  
  <p>there are no tabs. I think this is because the <code>&lt;div&gt;</code> being rendered to replace the <code>&lt;script</code>> tag in the template does not have a particular data attribute (data-section). I went looking for something like 'className' that I could add to the ItemView declaration above in order to include data-attributes, but I have come up dry. I want something like:</p>
  
  <pre><code>MyItem = Backbone.Marionette.ItemView.extend({
    template: "#design-tabs",
    data: {
      data-section: "",
      data-foo: "bar"
    },
    className: "section-container tabs",
    .
    .
    .
  </code></pre>
  
  <p>How do I add data attributes to the <code>&lt;div&gt;</code> (or otherwise) that replaces the <code>&lt;script&gt;</code> in a template?</p>