Reloading an Element After Data Is Loaded in Polymer

Question

I am building an app with Polymer. In my app, a user logs into the app. When they login, I am trying to show their orders. They can then choose an order and view the order d

Answer 1

Once the user login is complete you should run generateRequst() on the iron-ajax elemement which gets orders from the backend. You can do it in many different ways. Below is a reference design. You can modify it per your needs.

Your parent element design could be something like below:

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

Answer 2

You can use custom event fired from the host for reloading your customers-orders when login is successfully, For viewing the customer order you need to grab the orders selected by the customer. Add another Object for storing selecting orders let's says selectedOrders and using array-selector you can ensures path linkage when selecting specific items and store orders in selectedOrders. I have scaffold something here , though I did not test it can gives you something that might help you. Especially

1. using array-selector for storing selecting elements
2. fire an event from the host using custom event function : fire

customer-orders elements

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

the customer-order element should have a property data that fetch selected orders data from the selectedOrder in customers-orders.

customer-order

<dom-module id="customer-order">
    <template>
      
    </template>

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

Now your app will look like

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