Question

寻找我的问题的建议。我有一个用户登录后路由到的页面。此页面从iron-ajax事件处理程序的后端获取attached的一些数据。我的问题是当用户在注销后再次登录时，页面被路由到，但我的iron-ajax没有重新加载 - 似乎attached事件在第一次触发后不再被触发。有人可以帮忙吗？寻找一些示例代码，因为我是一个新手，示例代码将帮助我理解解决方案。谢谢！

更新了示例代码。下面的（简化）代码是用户在登录后路由到的页面Web组件。在iron-ajax事件处理程序中手动触发attached。但是，下次用户在注销后再次登录（不关闭浏览器）时，不会调用attached事件处理程序。

<dom-module id="device-section">
  <template>
    <style include="shared-styles">
        :host {
            display: block;
            padding: 10px;
        }
    </style>

    <app-config id="config"></app-config>
    <iron-localstorage name="session" value="{{session}}"></iron-localstorage>
    <app-data key="session" data="{{session}}"></app-data>

    <iron-ajax
        id="getDevices"
        url="{{url}}"
        method="get"
        handle-as="json"
        last-response="{{devices}}"></iron-ajax>

    <div class="card">
        <h1>Devices</h1>
        <template is="dom-repeat" items="{{devices.result}}">
            <div class="card">
                <p class="heading">Device</p>
                <p>[[item.devicePrint.name]] [[item.devicePrint.userAgent]]</p>
                <p class="heading">Registered</p>
                <p>[[item.lastSelectedDate]]</p>
            </div>
        </template>
    </div>
  </template>

  <script>
    Polymer({
      is: 'device-section',
      properties: {
        session: Object
      },

      attached: function() {
         this.$.getDevices.url
                = this.$.config.server.url.base
                  + this.$.config.server.url.getDevicesPath.replace("{userName}", this.session.userName);
            this.$.getDevices.generateRequest();
      }
    });
  </script>
</dom-module>

Answer 1

您在这里遇到的问题如下。当您使用iron-pages一次显示一个页面时（关于当前路径），所有页面在开头只实例化一次。

在您的情况下，您需要以某种方式与当前正在查看的特定页面进行通信，以便您可以在每次显示页面时触发AJAX请求。

为此，请按以下方式修改自定义组件：

<dom-module id="device-section">
    <template>
        Device section page

        <iron-ajax
            id="getDevices"
            url="manifest.json"
            method="get"
            handle-as="json"
            last-response="{{response}}"></iron-ajax>
    </template>

    <script>
        Polymer({
            is: 'device-section',
            properties: {
                active: {
                    type: Boolean,
                    value: false,
                    observer: '_activeChanged',
                },
            },

            attached: function() { 
                console.log('setting URL');
                // Here you would set your URL
            },

            _activeChanged: function(newValue, oldValue) {
                if(newValue) {
                    console.log('firing request');
                    this.$.getDevices.generateRequest();
                }
            },
        });
    </script>
</dom-module>

如您所见，我删除了所有非必要代码。重要的部分是：测试

在attached回调中设置网址，就像您已经完成的那样。但是不要在这里触发请求，因为我们将在页面进入视图时触发它。在我看来，您还应该使用created回调而不是attached。
定义一个新属性Boolean active，默认为false，并且有一个观察者方法。
在active属性的观察者方法中，当newValue等于true时，您将触发AJAX请求。这意味着该页面目前已进入视野。稍后将讨论设置active属性。

所以，这是组成部分。现在，我将向您展示如何修改组件的使用。我再次向您提供了以下代码的最基本示例：

<template is="dom-bind">
    <input type="number" value="{{selectedPage::input}}" />

    <iron-pages selected="[[selectedPage]]" selected-attribute="active">
        <section>First page</section>
        <device-section></device-section>
        <section>Third page</section>
    </iron-pages>
</template>

此处唯一重要的部分是selected-attribute="active"上的iron-pages属性。这样做会执行以下操作：它只是将active属性添加到当前选择的任何页面。在我的情况下，只有device-section元素才会实际读取此属性，因为其他页面不定义它也不需要它 - 它们将忽略该属性。

这意味着当device-section页面进入视图时，其active属性将被设置，属性观察者将触发AJAX请求。您可以看到，当您在页面之间切换时，将始终触发AJAX请求。

还有副作用。在您的示例代码中，即使您从未导航到该页面，AJAX请求也始终在开始时（页面加载时）触发。现在，这在特定的页面视图中懒得发生。

希望这符合您的要求并解决您的问题。如果您有任何意见，请不要犹豫，写下来，我会尽力解决。

页面路由到

1 个答案: