在聚合物中加载数据后重新加载元素

Question

我正在使用Polymer构建应用程序。 在我的应用中，用户登录应用。 当他们登录时，我正试图显示他们的订单。 然后，他们可以选择订单并查看订单详细信息。 为了显示订单，我有一个如下所示的自定义元素：

<dom-module id="customer-orders">
    <template>
        <div class="content">
            <h3>Welcome. You have ordered:</h3>
            <template is="dom-repeat" items="{{ orders }}" as="order">              
            <div on-click="orderSelected">
              <span>[[ order.total ]]</span>
              <span>[[ order.description ]]</span>          
            </div>
        </div>
    </template>

    <script>
        Polymer({
            is: 'customer-orders',
            properties: {
              orders: {
                type: Array,
                notify: true,
                value: function() {
                  return [];
                }
              }
            },

            orderSelected:function() {
              /* What goes here? */
            }
        });
  </script> 
</dom-module>

如何“告诉” customer-orders重新加载其数据？ 我的应用程序结构有点像这样：

<div class="row">
  <div class="col-md-12">
    <user-account></user-account>
  </div>
</div>

<div class="row">
  <div class="col-md-4">
    <customer-orders></customer-orders>
  </div>

  <div class="col-md-8">
    <customer-order></customer-order>
  </div>
</div>

可以想象，当用户登录时，我需要刷新客户订单数据。 然后，当用户选择订单时，我需要获取订单详细信息。 有两种情况我需要“刷新”控件的数据。

我的问题是，元素在屏幕上，用户可能没有登录，或者他们可能没有选择订单。 出于这个原因，我不能使用created ， ready或attached回调。 就像我需要在用户登录或选择订单时收听。 然后，a）在整个应用程序中广播一个消息，以某种方式元素监听或b）具体告诉custom-order刷新。 但是，我不确定如何，或者是否有办法做其中任何一种。

任何帮助将非常感激。

Answer 1

您可以使用从主机触发的自定义事件在登录成功时重新加载客户订单。要查看客户订单，您需要获取客户选择的订单。 添加另一个用于存储选择订单的对象让我们说selectedOrders并使用数组选择器，您可以确保在selectedOrders选择特定项目和存储订单时的路径链接。 我在这里有脚手架，虽然我没有测试它可以给你一些可能对你有帮助的东西。 特别

1. 使用数组选择器存储选择元素
2. 使用自定义事件函数从主机fire事件： fire

客户订单元素

 <dom-module id="customer-orders"> <template> <div class="content"> <h3>Welcome. You have ordered:</h3> <template is="dom-repeat" items="{{ orders }}" as="order" id="ordersList"> <div on-click="orderSelected"> <span>[[ order.total ]]</span> <span>[[ order.description ]]</span> </div> </template> //close the dom-repeat template <array-selector id="orderSelector" items="{{orders}}}" selected="{{selectedOrders}}" multi toggle></array-selector> </div> </template> <script> Polymer({ is: 'customer-orders', properties: { orders: { type: Array, notify: true, value: function() { return []; } }, selectedOrder:Object }, orderSelected:function(e) { var item=this.$.ordersList.itemForElement(e.target); this.$.orderSelector.select(item); //update the selected orders this.set('selectedOrder',item); // fire app onOrderChange event this.fire('onOrderChange',item); } }); </script> </dom-module> 

customer-order元素应该有一个属性数据，用于从customers-orders的selectedOrder获取所选订单数据。

顾客订单

 <dom-module id="customer-order"> <template> </template> <script> Polymer({ is: 'customer-order', properties: { data: { type: Object, notify: true } } }); </script> </dom-module> 

现在你的应用程序看起来像

 <div class="row"> <div class="col-md-12"> <user-account></user-account> </div> </div> <div class="row"> <div class="col-md-4"> <customer-orders ></customer-orders> </div> <div class="col-md-8"> <customer-order id="Custorder"></customer-order> </div> </div> <script> document.querySelector('customer-orders').addEventListener('OrderChange', function (e){ this.Custorder.data=e.detail.item; }) </script> 

Answer 2

一旦用户登录完成，你应该在iron-ajax元素上运行generateRequst() ，它从后端获取orders 。 你可以用很多种方式来做。 以下是参考设计。 您可以根据需要进行修改。

您的父元素设计可能如下所示：

<custom-orders orders={{orders}}></custom-orders>
<iron-ajax url="user/login" on-response="getOrders"></iron-ajax>
<iron-ajax id="userOrders" url="get/orders" last-response="{{orders}}"></iron-ajax>
<script>
  properties: {
    orders: Object,
  },
  getOrders: function() {
    this.$.userOrders.generateRequest();
  }
</script>