Backbone - 条件更改tagName

Question

我正在尝试根据条件切换Backbone视图的tagName.

我最初认为我可以设置一个默认的tagName说'div'(我意识到这是默认值),然后在视图的初始化函数中,检查条件并更改tagName,但遗憾的是这不起作用.

这是我的视图代码(用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'

使用此代码,tagName不会更改,它始终保持div.模板切换正确.

任何帮助,将不胜感激.干杯!

Answer 1

视图el是在initialize调用之前设置的.从精细手册:

埃尔 view.el

所有视图都始终具有DOM元素(el属性)......

因此,所有视图实例始终具有el,特别是,在调用之前el从视图创建.您正在尝试更改构造函数但已经存在,因此对于简单更改而言为时已晚,无法产生任何影响.tagNameinitialize@tagNameel@tagName

您可以使用setElement更改视图el:

setElement view.setElement(element)

如果您想将Backbone视图应用于不同的DOM元素,请使用setElement,它还将创建缓存的$el引用,并将视图的委托事件从旧元素移动到新元素.

像这样的东西:

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

您也可以设置@tagName = 'ul'是否需要,但无关紧要,因为tagName仅在实例化视图时使用.此外,@options应该始终在那里,所以你不必检查它,因为你正在使用CoffeeScript,如果你想检查它,存在运算符的访问器变体将更加惯用:

if @options.?device == 'mobile'

演示:http://jsfiddle.net/ambiguous/j4mSu/1/