当页面被路由到

Question

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

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

正如你所看到的，我已经删除了所有非必要的代码。最重要的部分是： 测试

1. 在attached回调设置URL，因为你已经做了。但是请不要在这里提出请求，因为我们稍后会在页面进入视图时将其解除。在我看来，你也应该使用created回调代替attached。
2. 定义一个新属性布尔型active，默认为false并具有观察者方法。
3. 在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> 

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

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

还有一个副作用。在示例代码中，即使您从未导航到该页面，AJAX请求也始终在开始时（在页面加载时）触发。现在，这种情况在那个特定的页面视图中很迟钝地发生。

希望这可以满足您的要求并解决您的问题。如果您有任何意见，请不要犹豫，写下来，我会尽我所能解决他们。