Блог

Я создаю и сохраняю форму с помощью Ember, но когда я перезагружаю страницу, переключатель, отслеживающий, была ли форма отправлена или нет, сбрасывается на false.

У меня есть страница, где текст по умолчанию «У вас нет связанной учетной записи». Затем у меня есть кнопка, которая при нажатии отображает форму для пользователя для заполнения информации. Когда пользователь нажимает отправить и сохраняет свою информацию, форма исчезает и отображается текст об их учетной записи. Однако, когда я перезагружаю страницу, текст отображается по умолчанию «У вас нет связанной учетной записи», и когда я нажимаю кнопку отправки формы, их информация заполняется в полях формы. Как я могу гарантировать, что при перезагрузке страницы отображается текст об учетной записи пользователя?

Это контроллер для страницы

 export default Controller.extend({
  isToggled: false,
  emailConnected: false,
  actions: {
    submitImap(mailbox, toggle, email) {
      this.get('ajax').request(`/api/accounts/${this.session.account.id}/mailboxes/imap`, {
        method: 'POST',
        data: mailbox
      })
        .then(() => Utils.notify("IMAP settings saved.", 'success'))
        .catch(() => Utils.notify("Error saving IMAP account. Try again", 'error'));
      this.send('contract', toggle);
      this.send('expand', email);
    },
    disconnectIMAP(mailbox, property, email) {
      this.get('ajax').request(`/api/accounts/${this.session.account.id}/mailboxes/imap`, {
        method: 'DELETE',
        data: {
          user_id: mailbox.user_id
        }
      }).then(() => {
        this.set(property, { smtp: {}});
      })
        .then(() => Utils.notify("IMAP removed. ", 'success'))
        .catch(() => Utils.notify("Error removing IMAP account", 'error'));
      this.send('contract',email );
    },
    expand: function(toggle) {
      this.set(toggle, true)
    },
    contract: function(toggle) {
      this.set(toggle, false)
    }
  }
});
  

Это шаблон, обрабатывающий отправку формы

 <h3>IMAP/SMTP</h3>
{{#if emailConnected}}

  {{#if isToggled}}
    <p> Edit your IMAP settings below </p>
  {{else}}
    <p>
      You currently have IMAP account <strong>{{imapMailbox.username}}</strong>
      connected for messaging.
    </p>
    <button  {{action "disconnectIMAP" imapMailbox 'imapMailbox' 'emailConnected' }} class = 'btn btn-danger'>Disconnect</button>
  {{/if}}

{{else}}
  <p>
    You currently do not have an account linked for messaging.
  </p>
{{/if}}

{{#if isToggled}}

  <form name='imap' class='modern-form full-width' {{action 'submitImap' imapMailbox 'isToggled' 'emailConnected' on="submit" }}>
    <div class='row'>
      <div class='col-sm-6'>
        <h4>IMAP</h4>
        <div class='form-group'>
          <label>
            Host
          </label>
          {{input type='text' required=true name='address' value=imapMailbox.address class='form-control'}}
        </div>
        <div class='form-group'>
          <label>
            Port
          </label>
          {{input type='text' required=true name='port' value=imapMailbox.port class='form-control'}}
        </div>
        <div class='form-check'>
          {{input type='checkbox' name='ssl' checked=imapMailbox.ssl class='form-check-input'}}
          <label for='ssl'>
            SSL
          </label>
        </div>
        <div class='form-check'>
          {{input type='checkbox' name='starttls' checked=imapMailbox.starttls class='form-check-input'}}
          <label>
            TLS
          </label>
        </div>
        <div class='form-group'>
          <label>
            Username
          </label>
          {{input type='text' required=true name='username' value=imapMailbox.username class='form-control'}}
        </div>
        <div class='form-group'>
          <label>
            Password
          </label>
          {{input type='password' required=true name='password' value=imapMailbox.password class='form-control'}}
        </div>
      </div>
      <div class='col-sm-6'>
        <h4>SMTP</h4>
        <div class='form-group'>
          <label>
            Host
          </label>
          {{input type='text' required=true name='smtp_address' value=imapMailbox.smtp.address class='form-control'}}
        </div>
        <div class='form-group'>
          <label>
            Port
          </label>
          {{input type='text' required=true name='smtp_port' value=imapMailbox.smtp.port class='form-control'}}
        </div>
        <div class='form-check'>
          {{input type='checkbox' name='smtp_ssl' checked=imapMailbox.smtp.ssl class='form-check-input'}}
          <label for='ssl'>
            SSL
          </label>
        </div>
        <div class='form-check'>
          {{input type='checkbox' name='smtp_starttls' checked=imapMailbox.smtp.enable_starttls_auto class='form-check-input'}}
          <label>
            TLS
          </label>
        </div>
        <div class='form-group'>
          <label>
            Username
          </label>
          {{input type='text' required='true' name='smtp_username' value=imapMailbox.smtp.user_name class='form-control'}}
        </div>
        <div class='form-group'>
          <label>
            Password
          </label>
          {{input type='password' required='true' name='smtp_password' value=imapMailbox.smtp.password class='form-control'}}
        </div>
      </div>
    </div>
    <button type="submit" class='btn btn-success'>
      Save
    </button>
    <button {{action 'contract' 'isToggled'}} class = 'btn btn-danger'>
      Cancel
    </button>
  </form>

{{else}}
  <button {{action 'expand' 'isToggled'}} class= 'btn btn-success'>
    Connect email
  </button>
{{/if}}
  

Прямо сейчас, если я отправляю форму, поведение соответствует ожидаемому, отображая текущее имя пользователя учетной записи, но при перезагрузке переменная emailConnected сбрасывается в false, и по умолчанию присутствует значение «у вас не подключена учетная запись», и когда я нажимаю на форму, значения заполняются.

Если вы reload переведете страницу (или) switch на другой маршрут, свойство контроллера isToggled вернется к своему исходному состоянию (т.е. к false в вашем случае).

Если вы хотите сохранить состояние и использовать свойство isToggled в различных частях вашего приложения, вы можете использовать службу ember

Но в вашем случае вы хотите сохранить состояние свойства даже после завершения страницы reloads . служба ember не поддерживает состояние после перезагрузки страницы.

Здесь начинается использование браузеров localStorage

Итак, в вашем случае —

1) сохраните значение свойства isToggled в браузерах localStorage

 import { computed } from '@ember/object';

export default Controller.extend({
  isToggled: computed(function () {
    // when the user visits the page for the very first time,
    // isToggled value is set to false,
    // from next time it gets the value from browsers localStorage.
    if (localStorage.isToggled) {
      return JSON.parse(localStorage.isToggled);
     } else {
      return false;
    }
  }),
  ...
  actions: {
  ...
    expand: function() {
      localStorage.setItem('isToggled', JSON.stringify(true));
      this.set('isToggled', true);
    },
    contract: function() {
      localStorage.setItem('isToggled', JSON.stringify(false));
      this.set('isToggled', false);
    }
  ...
  }
});
  

Теперь, когда страница перезагружается, isToggled состояние свойства не меняется на исходное состояние.

Вы можете найти переменную localStorage для isToggle браузеров в инструменте разработчика ваших браузеров: Application -> Local Storage вкладка

Вы также могли бы использовать библиотеку локального хранилища Ember для достижения этой цели: https://github.com/funkensturm/ember-local-storage