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。来自fine manual：

el view.el

所有视图始终都有DOM元素（ el 属性）...

因此，所有视图实例始终都有el，特别是el是在调用tagName之前从视图initialize创建的。您尝试在构造函数中更改@tagName，但el已经存在，因此对于简单的@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，如果您想要检查它，existential operator的访问者变体会更加惯用：

if @options.?device == 'mobile'

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

Answer 2

您是否尝试过直接使用view.setElement（element）而不是设置标记名称？

Answer 3

从主干0.9.9（在询问此问题时不存在），tagName字段可以是一个函数。这可用于在创建视图时动态选择tagName。

Backbone - 条件更改tagName

3 个答案: