在聚合物

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. using array-selector for storing selecting elements
2. fire an event from the host using custom event function : 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元素应该有一个属性数据，可以从selectedOrder中的customers-orders获取所选订单数据。

客户阶

<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>