Question

I’m trying to switch the tagName of a Backbone view based on a condition.

I initially thought I would be able to set a default tagName of say ‘div’ (I realize this is the default), then in the view’s initialize function, check for the condition and change the tagName but this unfortunately didn’t work.

Here is my view code (written in coffeescript):

  class Test.Views.ListView extends Backbone.View
    attributes: {"data-role": "listview"}
    className: 'row'
    tagName: 'div'
    initialize: ->
      if @options and @options.device == "mobile"
        @template = "/app/templates/mobile/test/test.html" 
        @tagName = 'ul'

With this code, the tagName does not change, it always remains a div. While the template is switched correctly.

Any help would be appreciated. Cheers!

Answer 1

The view’s el is set up before initialize is called. From the fine manual:

el view.el

All views have a DOM element at all times (the el property)…

So all view instances always have an el and in particular, el is created from the view’s tagName before initialize is called. You’re trying to change @tagName in your constructor but el already exists so it is too late for a simple @tagName change to have any effect.

You can use setElement to change the view’s el:

setElement view.setElement(element)

If you’d like to apply a Backbone view to a different DOM element, use setElement, which will also create the cached $el reference and move the view’s delegated events from the old element to the new one.

Something like this:

initialize: ->
  if @options and @options.device == "mobile"
    @template = "/app/templates/mobile/test/test.html" 
    @setElement(@make('ul', _(@attributes).extend(class: @className)))

You could also set @tagName = 'ul' if you wanted but it won’t matter since tagName is only used when instantiating a view. Also, @options should always be there so you don’t have to check it and since you’re using CoffeeScript, the accessor variant of the existential operator would be more idiomatic if you wanted to check it anyway:

if @options.?device == 'mobile'

Demo: http://jsfiddle.net/ambiguous/j4mSu/1/