javascript - Backbone - Change tagName on condition - Stack Overflow

admin管理员组

文章数量:1410712

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!

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!

• javascript
• backbone.js
• backbone-views

Share Improve this question Follow edited Sep 3, 2013 at 13:23 Thaddeus Albers 4,19255 gold badges3636 silver badges4343 bronze badges asked May 29, 2012 at 17:39 MitcivMitciv 82333 gold badges1515 silver badges2121 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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/ambiguous/j4mSu/1/

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

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.

本文标签： javascriptBackboneChange tagName on conditionStack Overflow