Question

我有一个非常令人困惑的问题，这是我以前从未见过的。我想知道我是否遗漏了一些非常明显的东西。

我有一个像这样的模板（我用Underscore编译）：

<a href="#advanced-search" data-toggle="modal">
  Advanced search
</a>

<div id="advanced-search">
  <div class="modal-header">header</div>
  <div class="modal-body">
    <form id="advanced-search-form">
      // This has form elements
    </form>
  </div>
  <div class="modal-footer">footer</div>
</div>

问题在于每当我重新渲染使用模板的Backbone View时，表单元素都不会呈现！初始渲染工作正常。

我尝试通过在表单元素中嵌套advanced-search-form并从表单元素中删除id来将表单元素与<div id="advanced-search-form"> id分开。结果是，div仍然没有呈现嵌套的form。

我需要表单元素才能使用serializeArray，only works on form elements。

我想一个解决方法是编写一个可以在任何元素中序列化输入元素的函数，但这并不理想，我真的很想知道为什么会发生这种奇怪的事情。

感谢您的期待！

编辑：渲染代码现在我不会根据任何集合或模型事件重新渲染。我通过父视图中的链接上的单击事件手动触发重新渲染。以下是我的两个视图（CoffeeScript）的基本结构：

AdvancedSearchView = Backbone.View.extend
  template: _.template AdvancedSearchTpl   #available via requirejs      

  render: ->
    @$el.html @template() 

ParentView = Backbone.View.extend
  initialize: ->
    _.bindAll @
    $('body #refresh').livequery 'click', @refreshAdvancedSearch

  render: ->
    if !@advancedSearchElem #cache the view to save state
      @advancedSearchView = new AdvancedSearchView
      @advancedSearchElem = @advancedSearchView.render().el
    $('#content').html @advancedSearchElem

  refreshAdvancedSearch: ->
    @advancedSearchElem = @advancedSearchView.render().el  #from here, the template is rendered without the form element
    @render()

parentView = new ParentView
parentView.render()

Answer 1

后来我意识到我在另一个<form>标记内呈现form，我相信Chrome会通过移除内部form标记来自动修复无效的html。这可能是我的问题，因为console.logging模板的html输出包含内部表单标记。

下划线模板不会在Backbone View重新渲染上渲染元素

1 个答案: