search

vecnatechnologies / backbone-torso

A holistic approach to Backbone applications
http://vecnatechnologies.github.io/backbone-torso
Apache License 2.0
17 stars 20 forks source link

FormView has problems re-rendering select options because this.stickit() #176

Closed mandragorn closed 8 years ago

mandragorn commented 8 years ago

For some reason it matches up whitespace text nodes as the current node with option nodes as the new node during hotswap causing it to generate mis-matched option list:

First render is ok:

    <select class="visit-type__select-service-type" name="serviceType" data-model="serviceType" data-feedback="serviceType" id="service-type" aria-label="Select service type">

    <option value="defaultOption">Select Service</option><option value="CT Scan">CT Scan</option><option value="Diagnostic Mammogram">Diagnostic Mammogram</option><option value="Infectious Disease">Infectious Disease</option><option value="MRI">MRI</option><option value="Screening Mammogram">Screening Mammogram</option></select>
    <select class="visit-type__select-visit-type visit-type__select-service-type--disabled" name="visitType" data-model="visitType" data-feedback="visitType" id="visit-type" aria-label="Select Visit Type" disabled="">

    <option value="defaultOption">Select Visit Type (optional)</option></select>

Template generated for 2nd render is ok:

    <select class="visit-type__select-service-type"
            name="serviceType" data-model="serviceType" data-feedback="serviceType" name="service-type" id="service-type" 
            aria-label="Select service type">
      <option value="defaultOption">
        Select Service
      </option>
        <option value="CT Scan">
          CT Scan
        </option>
        <option value="Diagnostic Mammogram">
          Diagnostic Mammogram
        </option>
        <option value="Infectious Disease">
          Infectious Disease
        </option>
        <option value="MRI">
          MRI
        </option>
        <option value="Screening Mammogram">
          Screening Mammogram
        </option>
    </select>

But after template renderer merges, they are not ok:

    <select class="visit-type__select-service-type" name="serviceType" data-model="serviceType" data-feedback="serviceType" id="service-type" aria-label="Select service type">

    <option value="defaultOption">Select Service</option><option value="CT Scan">CT Scan</option><option value="Diagnostic Mammogram">Diagnostic Mammogram</option><option value="defaultOption">Infectious Disease</option><option value="Diagnostic Mammogram">MRI</option><option value="MRI">Screening Mammogram</option></select>
    <select class="visit-type__select-visit-type visit-type__select-service-type--disabled" name="visitType" data-model="visitType" data-feedback="visitType" id="visit-type" aria-label="Select Visit Type" disabled="">

    <option value="defaultOption">Select Visit Type (optional)</option></select>
mandragorn commented 8 years ago

Workaround: Removing whitespace around the options seems to help:

Original:

    <select ...>
      <option value="{{defaultOptionValue}}">
        {{i18n "dropdown.default"}}
      </option>
      {{#each serviceTypes}}
        <option value="{{id}}">
          {{attributes.userFriendlyName}}
        </option>
      {{/each}}
    </select>

New:

    <select ...>
      <option value="{{defaultOptionValue}}">
        {{~i18n "dropdown.default"~}}
      </option>
      {{~#each serviceTypes~}}
        <option value="{{id}}">
          {{~attributes.userFriendlyName~}}
        </option>
      {{~/each~}}
    </select>