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 details. To display the orders, I have a custom element that looks like this:

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

How do I "tell" customer-orders to reload its data? My app is structured kind of like this:

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

As you can imagine, when a user logs in, I need to refresh the customer-orders data. Then, when a user selects an order, I need to grab the order details. There are two scenarios where I need to "refresh" the control's data.

My problem is, the elements are on the screen and the user may not have logged in or, they may not have chosen an order. For that reason, I can't use the created, ready or attached callbacks. Its like I need to listen for when the user logs in or chooses an order. Then, either a) broadcast a message throughout the app that somehow the elements listen to or b) Specifically tell custom-order to refresh. However, I'm not sure how, or if there is a way to do either of those.

Any help would be much appreciated.

Answer 1

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>

Answer 2

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>