2

我正在尝试根据条件切换 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。而模板切换正确。

任何帮助，将不胜感激。干杯!

4

3 回答 3

6

视图el是在调用之前设置的initialize。来自精美手册：

埃尔 view.el

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

所以所有的视图实例总是有一个el，特别是，el是从视图的调用tagName之前创建的initialize。您正在尝试更改@tagName构造函数但el已经存在，因此简单的@tagName更改无法产生任何效果为时已晚。

您可以使用setElement来更改视图的el：

设置元素 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/

于 2012-05-29T18:37:02.413 回答
1

您是否尝试过直接使用 view.setElement(element) 而不是设置标签名称？

于 2012-05-29T17:49:45.450 回答
1

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

于 2014-07-01T17:19:00.867 回答