Underscore template does not render element on Backbone View re-render

Question

I'm having a very perplexing issue which I've never seen before. I wonder if I'm missing something very obvious.

I have an template like so (which I compile with 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>

The problem is that whenever I re-render the Backbone View which is using the template, the form element is not rendered! The initial render works fine.

I've tried separating the form element from the advanced-search-form id by nesting a <div id="advanced-search-form"> within the form element and removing the id from the form element. The result is that the nested div is rendered while the form still is not.

I need the form element in order to use serializeArray, which only works on form elements.

I suppose a workaround would be to write a function which can serialize input elements within any element, but this is not ideal and I would really like to discover why this strange thing is happening.

Thanks for looking!

EDIT: the render code Right now I am not re-rendering based on any collection or model events. I am manually triggering the re-render via a click event on a link in the parent view. The following is the basic structure of my two views (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()

Add a <% debugger %> to the start of your template, and using your favorite Browser's debugger, step through the generated template code. — WiredPrairie
Can you reproduce this in JSFiddle? Here's a ready fiddle with Backbone, underscore etc. already loaded: jsfiddle.net/3ekqd — jevakallio
@fencliff I've tried to reproduce the error to no avail. Will try again... — mnoble01
@WiredPrairie The generated template code seems to contain the form element, initially and during subsequent renders. — mnoble01

mnoble01 mnoble01 · Accepted Answer · 2013-03-26T21:30:51

Later on I realized I was rendering a <form> inside another form tag, and I believe Chrome automatically fixed the invalid html by removing the inner form tag. This was probably my issue, as console.logging the html output of the template included the inner form tag.

Underscore template does not render element on Backbone View re-render

1 Answers