0

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

我有一个这样的模板（我用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>

问题是每当我重新渲染使用模板的主干视图时，表单元素都不会渲染！初始渲染工作正常。

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

我需要表单元素才能使用serializeArray，它只适用于表单元素。

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

感谢您的关注！

编辑：渲染代码现在我不是基于任何集合或模型事件重新渲染。我通过父视图中链接上的单击事件手动触发重新渲染。以下是我的两个视图（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()
4

1 回答 1

0

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

于 2013-03-26T21:30:51.010 回答