Question

I have a view that needs to populate data to a dl tag, so I want that view to produce a markup that will look like this :

<dt><i class="icon-<%= icon %>"></i><%= title %></dt>
<dd><%= content %> </dd>

So, I don’t really have a top level element that would work. It can’t be a dl tag as I will need to put several item in that top element afterwards.

Is there a way out of this ?

Answer 1

There is no good alternative here. As you say there is no valid tag for the item view (since a dl is really only valid with dt and dd as children) and a view has exactly one $el.

Perhaps you should refactor your code so that you have a collection view that represents the whole DL instead? If there aren’t a whole lot of models in the collection it might be OK to re-render the DL/Collection view when any of its models change:

var Definitions = Backbone.View.extend({
  tagName: 'dl',

  initialize: function () {
    this.collection.on('change', this.render, this);
  }

  render: function () {
    this.$el.html( <output from template that loops over all definitions> );
  }
});

I can’t think of any way around it if you want valid HTML. If you don’t care much about semantics you could use an unordered list with separate item views.