Question

我正在使用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，并且默认值为“您没有连接帐户”单击填充值的表格。

Answer 1

如果您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属性状态不会更改为初始状态。

您可以在浏览器开发者工具中找到isToggle个浏览器localStorage变量：Application-> Local Storage标签

Answer 2

您还可以使用Ember Local Storage库来实现此目的：https://github.com/funkensturm/ember-local-storage

如何确保Ember在重新加载时保存变量状态

2 个答案: