Как убедиться, что Ember сохраняет состояние переменной при перезагрузке - PullRequest
Новая
       13

Как убедиться, что Ember сохраняет состояние переменной при перезагрузке

0 голосов
/ 23 марта 2019

Я создаю и сохраняю форму, используя 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, и по умолчанию присутствует «у вас нет подключенной учетной записи», и когда я щелкните форму, значения которой будут заполнены.

Ответы [ 2 ]

1 голос
/ 24 марта 2019

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

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

Но в вашем случае вы хотите сохранитьсостояние объекта даже после страницы 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 tab

0 голосов
/ 03 апреля 2019

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

...