javascript - 在 Polymer 中加载数据后重新加载元素

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 元素应该有一个属性数据，从 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>