CODEWITHSUNDEEP
javascriptbackbone.jsbackbone-views
Mitciv
Mitciv

Reputation: 823

Backbone - Change tagName on condition

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!

Upvotes: 2

Views: 2525

Answers (3)

Nicholas Tower
Nicholas Tower

Reputation: 85112

As of backbone 0.9.9 (which did not exist when this question was asked), the tagName field can be a function. This can be used to choose the tagName dynamically when the view is created.

Upvotes: 1

mu is too short
mu is too short

Reputation: 434785

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/

Upvotes: 6

Lyn Headley
Lyn Headley

Reputation: 11588

Have you tried using view.setElement(element) directly instead of setting the tag name?

Upvotes: 1

Related Questions