JavaScript变量未在编辑时更新

时间：2019-07-15 13:59:05

标签： javascript twig

当前，我正在尝试显示一个模板，该模板中的数据带有常量变量templateData。来自常量变量的数据正确显示在模板recap上。但是，当我回到表单并编辑信息时，在摘要模板上，templateData无法反映所做的更改。例如。 enter image description here

如您在图像中看到的，尽管我在编辑时将此信息编辑为age 25:，但仍显示age: 50和age: 33。 enter image description here

我的第一个想法是更改事件监听器，但这没有用。这是脚本：

  /**
   * Assembles data for the recap view and renders the recap template.
   * @private
   * @return {this} Screener
   */
  _renderRecap() {
    const templateData = {
      categories: [],
      household: {
        assets: `$${this._household.get('cashOnHand')}`,
        owners: [],
        rentalType: '',
        renters: [],
        types: [],
        zip: this._household.get('zip')
      },
      members: []
    };

    // Add programs.
    _.each(this._household.get('programCategories'), category => {
      const obj = {
        slug: category,
        label: Utility.localize(category)
      };
      templateData.categories.push(obj);
    });

    const housingTypes = [
      'Renting',
      'Owner',
      'StayingWithFriend',
      'Hotel',
      'Shelter',
      'PreferNotToSay'
    ];

    // Add housing type.
    _.each(housingTypes, type => {
      if (this._household.get(`living${type}`)) {
        const obj = {
          slug: type,
          label: Utility.localize(`living${type}`)
        };

        templateData.household.types.push(obj);
      }

      if (type === 'Renting') {
        templateData.household.rentalType =
            Utility.localize(this._household.get('livingRentalType'));
      }
    });

    // Add household member data.
    _.each(this._people.slice(0, this._household.get('members')),
        (person, i) => {
      const member = {
        age: person.get('age'),
        benefits: [],
        conditions: [],
        expenses: [],
        incomes: [],
        isHoh: person.get('headOfHousehold'),
        relation: Utility.localize(person.get('headOfHouseholdRelation'))
      };

      if (person.get('headOfHousehold')) {
        if (i === 0) {
          member.relation = Utility.localize('Self');
        } else {
          member.relation = Utility.localize('HeadOfHousehold');
        }
      }

      _.each(person.getBenefits(), (value, key) => {
        if (value) {
          member.benefits.push(Utility.localize(key));
        }
      });

      _.each(person.getConditions(), (value, key) => {
        if (value) {
          member.conditions.push(Utility.localize(key));
        }
      });

      _.each(['incomes', 'expenses'], type => {
        _.each(person.get(type), item => {
          const obj = {
            amount: `$${item.amount}`,
            type: Utility.localize(item.type),
            frequency: Utility.localize(item.frequency)
          };
          member[type].push(obj);
        });
      });

      _.each(['livingOwnerOnDeed', 'livingRentalOnLease'], type => {
        if (person.get(type)) {
          const obj = {};
          if (person.get('headOfHousehold')) {
            obj.slug = i === 0 ? 'Self' : 'HeadOfHousehold';
          } else {
            obj.slug = person.get('headOfHouseholdRelation');
          }
          obj.label = Utility.localize(obj.slug);
          if (type === 'livingOwnerOnDeed') {
            templateData.household.owners.push(obj);
          } else {
            templateData.household.renters.push(obj);
          }
        }
      });

      templateData.members.push(member);
    });
    const template = $('#screener-recap-template').html();
    console.dir(templateData);
    console.log('imhere');
    const renderedTemplate = _.template(template)(templateData);
    $('#recap-body').html(renderedTemplate);
    return this;
  }

以下是显示数据的模板：

<div class="screener-body-step js-screener-step" id="recap" data-track-key="Screener Step: Recap"
  data-track-data='[{"WT.si_n": "ScreeningHH"},{"WT.si_p": "Recap"},{"WT.si_cs": 1}]'>
  <div data-js="step-title" class="{{ styles.number }} hidden" aria-hidden="true">{{ __('Is all of your information correct?', 'accessnyc-screener') }}</div>

  <h1 class="text-color-blue-dark px-3 pt-3">{{ __('Ok. Here’s what we’ve got so far:', 'accessnyc-screener') }}</h1>

  <div class="p-3 screen-tablet:m-3 screen-desktop:p-4 bg-color-grey-lightest">
    <div id="recap-body" class="pb-4"></div>

    <div id="screener-recaptcha-container" class="recap-captcha hidden pb-4">
      <p>{{ __('Check the "I’m not a robot" box below and click Continue to get your results.', 'accessnyc-screener') }}</p>
      <div class="screener-question-container">
        <div id="screener-recaptcha"></div>
      </div>
    </div>

    <button type="button" class="js-screener-submit btn btn-primary btn-next btn-small" data-action="{{ formAction }}">
      {{ __('Yes, continue to my results', 'accessnyc-screener') }}
    </button>

    <div data-js="spinner" style="display:none;">
      <div class="flex justify-center">
        {% include 'partials/spinner.twig' with {this: {class: 'icon-4 text-color-yellow-access'}} only %}
      </div>
    </div>
  </div>
</div>


/**
   * If this component has not yet been initialized, attaches event listeners.
   * @method
   * @return {this} OfficeMap
   */
  init() {
    if (this._initialized) {
      return this;
    }

    window.addEventListener('hashchange', e => {
      e.preventDefault();
      const hash = window.location.hash;
      const $section = $(hash);

      if ($section.length && $section.hasClass(Screener.CssClass.STEP)) {
        this._goToStep($section[0])._reFocus();
        $(window).scrollTop($(Screener.Selectors.VIEW).offset().top);
      }
    });

    $(this._el).on('change', 'input[type="checkbox"]', e => {
      this._toggleCheckbox(e.currentTarget);
    }).on('change', `.${Screener.CssClass.TOGGLE}`, e => {
      this._handleToggler(e.currentTarget);
    }).on('change', `.${Screener.CssClass.ADD_SECTION}`, e => {
      this._addMatrixSection(e.currentTarget);
    }).on('change', `.${Screener.CssClass.MATRIX_SELECT}`, e => {
      this._toggleMatrix(e.currentTarget);
    }).on('click', `.${Screener.CssClass.VALIDATE_STEP}`, e => {
      const $step = $(e.currentTarget).closest(`.${Screener.CssClass.STEP}`);
      return this._validateStep($step);
    }).on('click', `.${Screener.CssClass.SUBMIT}`, e => {
      if (!this._recaptchaRequired) {
        this._submit($(e.currentTarget).data('action'));
      } else {
        $(e.currentTarget).closest(`.${Screener.CssClass.STEP}`)
          .find(`.${Screener.CssClass.ERROR_MSG}`).remove();
        if (this._recaptchaVerified) {
          this._submit($(e.currentTarget).data('action'));
        } else {
          this._showError($('#screener-recaptcha')[0],
              Screener.ErrorMessage.REQUIRED);
        }
      }
    }).on('blur', '[data-type="integer"]', e => {
      this._validateIntegerField(e.currentTarget);
    }).on('blur', '[data-type="float"]', e => {
      this._validateFloatField(e.currentTarget);
    }).on('blur', '[data-type="zip"]', e => {
      this._validateZipField(e.currentTarget);
    }).on('blur', '[data-type="age"]', e => {
      this._validateIntegerField(e.currentTarget);
    }).on('keyup', '[data-type="float"]', e => {
      this._limitFloatFieldLength(e.currentTarget);
    }).on('keydown', 'input[type="number"]', e => {
      // Number inputs still allow certain characters outside of 0-9.
      if (e.keyCode === 69 || // 'e' key, used for scientific notation
          e.keyCode === 187 || // '=' key (for the '+' sign)
          e.keyCode === 188 || // ',' key
          e.keyCode === 189) { // '-' key
        e.preventDefault();
      }
    }).on('click', `.${Screener.CssClass.REMOVE_PERSON}`, e => {
      this._removePerson(parseInt($(e.currentTarget).data('person'), 10))
          ._renderRecap();
    }).on('click', `.${Screener.CssClass.EDIT_PERSON}`, e => {
      this._editPerson(parseInt($(e.currentTarget).data('person'), 10));
    }).on('keyup', 'input[maxlength]', e => {
      this._enforceMaxLength(e.currentTarget);
    }).on('submit', e => {
      e.preventDefault();
      this._$steps.filter(`.${Screener.CssClass.ACTIVE}`)
        .find(`.${Screener.CssClass.VALIDATE_STEP},` +
        `.${Screener.CssClass.SUBMIT}`).trigger('click');
    });

关于编辑后如何更新templateData中的数据的任何想法？

这是edit函数：

 /**
   * Navigates the user to the edit screen for the person at index `i`
   * in this._people. If `i` is 0, then the user goes to step 3. If it is 1
   * and that person is Head of the Household, go to step 8. Otherwise, set
   * the proper data attribute of step 9 and navigate there.
   * @private
   * @param {Number} i - index of user.
   * @return {this} Screener
   */
  _editPerson(i) {
    if (i === 0) {
      window.location.hash = '#step-3';
    } else if (i === 1 && this._people[i].get('headOfHousehold')) {
      window.location.hash = '#step-8';
    } else {
      $('#step-9').data('personIndex', i);
      window.location.hash = '#step-9';
    }
    return this;
  }

0 个答案:

没有答案
相关问题
最新问题