javascript - 主干 - 根据条件更改 tagName

Question

我正在尝试根据条件切换 Backbone View 的 tagName。

我最初认为我可以设置一个默认的 tagName 为 'div'(我意识到这是默认的)，然后在 View 的初始化函数中，检查条件并更改 tagName 但不幸的是这没有工作。

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

View 的 el在 initialize 之前设置叫做。来自fine manual :

el view.el

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

所以所有的 View 实例总是有一个el特别是 el从 View 的 tagName 创建之前initialize叫做。您正在尝试更改 @tagName在你的构造函数中但是 el已经存在，所以对于一个简单的 @tagName 来说已经太晚了更改以产生任何影响。

您可以使用 setElement 更改 View 的 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.

像这样:

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

您还可以设置 @tagName = 'ul'如果你想要但没关系因为tagName仅在实例化 View 时使用。另外，@options应该总是在那里，所以你不必检查它，因为你使用的是 CoffeeScript，existential operator 的访问器变体。如果你想检查它会更惯用:

if @options.?device == 'mobile'

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