在聚合物中加载数据后重新加载元素 [英] Reloading an Element After Data Is Loaded in Polymer

问题描述

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

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.

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

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.

推荐答案

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

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. 使用数组选择器存储选择元素


2. 使用自定义事件函数从主机触发事件：
   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>

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

the customer-order element should have a property data that fetch selected orders data from the selectedOrder in 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>

这篇关于在聚合物中加载数据后重新加载元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！