聚合物如何檢查子元素準備

父元素：聚合物如何檢查子元素準備

... 
<template> 
    <my-list_loader></my-list_loader> 
</template> 
...

我有一個包含另一個自定義元素的自定義元素。 my-list_loader是一個自定義元素，其作業是連接到遠程Web服務並下載項目列表。這些項目存儲在'my-list-loader'屬性中，名爲'items_list'

如何通知父元素'my-list_loader'已完成加載數據。我需要這個在'父元素'執行一堆行動。即：關閉微調和填充加載的數據下拉（自定義處理後）

我試圖複製我目前的詩情：

的index.html

<!doctype html> 
<html> 
<head> 
    <title></title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script type="text/javascript" src="./bower_components/webcomponentsjs/webcomponents.js"></script> 
    <link rel="import" href="./bower_components/polymer/polymer.html"> 
    <link rel="manifest" href="./manifest.json"> 
    <!--My components--> 
    <link rel="import" href="./src/components/c5.html"> 
    <style></style> 
</head> 
<body> 
<c-5></c-5> 
</body> 
</html>

我的裝載機：定製loader.html

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> 
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html"> 
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html"> 
<link rel="import" href="../../bower_components/paper-item/paper-item.html"> 
<link rel="import" href="../../bower_components/paper-button/paper-button.html"> 
<link rel="import" href="../../bower_components/app-storage/app-localstorage/app-localstorage-document.html"> 

<link rel="import" href="../components/service-items.html"> 

<dom-module id="custom-loader"> 
    <style> 
     paper-dropdown-menu { 
      width: 90%; 
     } 
    </style> 
    <template> 
     <app-localstorage-document id="localStorageElement" key="myapp.login_data" 
            data="{{loginInfo}}"></app-localstorage-document> 
     <service-items 
       id="service_items" 
       items="{{items_list}}" 
       auth="" 
       device="12345" 
       service_path="http://localhost:3488/ws.asmx/itemsList"> 
     </service-items> 

     <div> 
      <paper-dropdown-menu id="[[dd_id]]" label="[[dd_label]]"> 
       <paper-menu 
         class="dropdown-content" 
         selected="{{item_seleccionado}}" 
         attr-for-selected="value" 
         on-iron-select="asignar_seleccion"> 
        <template id="options" is="dom-repeat" items="{{items_list}}" as="c"> 
         <paper-item value="[[c.code]]">[[c.name]]</paper-item> 
        </template> 
       </paper-menu> 
      </paper-dropdown-menu> 
     </div> 
    </template> 
    <script> 
     Polymer({ 
      is: 'custom-loader' 
      ,properties:{ 
       loginInfo: { 
        type: Object, 
        reflectToAttribute: true, 
        value: { 
         user: "", 
         pass: "", 
         cred: "" 
        } 
       }, 
       dd_label:{ 
        type: String 
       }, 
       dd_id: { 
        type: String 
       }, 
       selected_item: { 
        type: String, 
        reflectToAttribute: true 
       }, 
       items_list: { 
        type: Array, 
        reflectToAttribute: true, 
        observer: 'list_filled' 
       }, 
       dataLoaded: { 
        type:Boolean, 
        reflectToAttribute: true, 
       } 
      } 

      ,ready: function() { 
       this.loginInfo = JSON.parse(this.$.localStorageElement.storage['myapp.login_data']); 
       this.$.service_items.auth = this.loginInfo.cred; 
       this.$.service_items.getdata(); 
      }, 
      created: function() { 
      } 
      ,list_filled: function (newValue,oldValue) { 
       if (!!newValue && Array === newValue.constructor){ 
        if (newValue.length > 0){ 
         this.$.list_ok = true; 
        } 
       } 
      } 
     }) 
    </script> 
</dom-module>

自定義加載程序使用另一個子元素：服務項目：

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html"> 

<dom-module id="service-items"> 
    <template> 
     <iron-ajax id="ajaxItems" 
        content-type="application/x-www-form-urlencoded; charset=UTF-8" 
        handle-as="text" 
        on-response="handle_service_response"> 
     </iron-ajax> 
    </template> 
    <script language="javascript" src="./external/js/SoftXpath.js"></script> 
    <script> 
     Polymer({ 
      is: 'service-items', 
      properties: { 
       items: { 
        type: Array, 
        notify: true, 
        value: function(){return []} 
       }, 
       auth:{ 
        type: String, 
        notify: true 
       }, 
       device: { 
        type: String, 
        notify: true 
       }, 
       service_path:{ 
        type: String, 
        notify: true 
       } 
      }, 
      getdata: function() { 
       this.get_items(); 
      }, 
      ready:function() { 
      }, 
      get_items: function() { 
       this.$.ajaxItems.method = "GET"; 
       this.$.ajaxItems.url = this.service_path; 
       this.$.ajaxItems.params = {device:this.device, authorization_id: this.auth}; 
       console.log('Service (items): requesting data ...'); 
       this.$.ajaxItems.generateRequest(); 
      }, 
      handle_service_response: function (request) { 
       console.log('Service (items): processing data ...'); 
       var xPath = new SoftXpath(); 
       xPath.registerNamespace("",""); 
       xPath.loadXML(request.detail.response); 
       var list = xPath.selectNodes("//Tercero//*[self::Codigo|self::Nombre]"); 
       var xPathElement = new SoftXpath(); 
       tmpList = []; 
       if (list){ 
        for(var i = 0; i < list.length;i = i + 2){ 
         var c = {}; 
         c.code = list[i].text; 
         c.name = list[i+1].text; 
         tmpList.push(c); 
        } 
        this.items = tmpList; 
        console.log('Service (Items): ' + tmpList.length + ' items'); 
        return this.items; 
       } else { 
        return [] 
       } 
      } 
     }); 
    </script> 
</dom-module>

，這是C-5模塊：

<link rel="import" href="../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> 
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html"> 
<link rel="import" href="../../bower_components/paper-item/paper-item.html"> 
<link rel="import" href="../../bower_components/iron-form/iron-form.html"> 

<link rel="import" href="custom-loader.html"> 

<dom-module id="c-5"> 
    <template> 
     <div style="display: none"> 
      <custom-loader 
        data-loaded="{{dataLoaded}}" 
        items_list="" 
        id="c5" 
        dd_id="dd_items" 
        dd_label="C5"> 
      </custom-loader> 
     </div> 
     <div> 
      <paper-dropdown-menu id="mc5" label="C5" hidden$="{{ro_cv1}}"> 
       <paper-menu 
         class="dropdown-content" 
         selected="{{item_selected}}" 
         attr-for-selected="value" 
         on-iron-select="selected_item_action"> 
        <template id="options" is="dom-repeat" items="{{items_list}}" as="c"> 
         <paper-item value="[[c.code]]">[[c.name]]</paper-item> 
        </template> 
       </paper-menu> 
      </paper-dropdown-menu> 
     </div> 
    </template> 
    <script> 
     Polymer({ 
      is: 'c-5', 
      properties: { 
       items_list: { 
        type: Array, 
        reflectToAttribute: true 
       }, 
       dataLoaded:{ 
        type: Boolean, 
        default: false, 
        observer: 'list_changed' 
       }, 
       ro_cv1: { 
        type: Boolean, 
        value: false 
       }, 
       item_selected: { 
        type: String, 
        reflectToAttribute: true 
       } 
      } 
      , ready: function() { 
       console.log('Ready c5'); 
      } 
      , created: function() { 
       console.log('Created c5'); 
      } 
      ,list_changed: function() { 
       console.log('C5: list_changed'); 
       if (!!this.items_list && Array === this.items_list.constructor){ 
        console.log('C5: ' + this.items_list.length + ' items') 
       } 
      } 
      , attached: function() { 
       console.log('Attached c5'); 
      } 
      , selected_item_action: function (e) { 
       var selectedItem = e.target.selectedItem; 
       if (selectedItem) { 
        var v = this.$.options.itemForElement(selectedItem).codigo; 
        this.set('item_selected', v); 
        console.log('Selected item: ' + this.item_selected); 
        return this.item_selected; 
       } 
      } 
     }) 
    </script> 
</dom-module>

我試圖用dataLoaded作爲sugested但我不具備預期： I'm得到這個控制檯日誌：

Created c5 
polymer-micro.html:673 Polymer::Attributes: couldn`t decode Array as JSONservice-items.html:44 Service (items): requesting data ... 
c5.html:49 Ready c5 
c5.html:60 Attached c5 
service-items.html:48 Service (items): processing data ... 
service-items.html:63 Service (Items): 187 ítems

c-5中的dataLoaded observer（list_changed）從來沒有被調用過。我需要在C-5這樣的通知。

來源

2016-12-03 RubenDFC

在您的數據加載方法my-list_loader中，您設置了一個屬性loadingFinished，然後在父項中測試該屬性。反映財產的屬性，像這樣

is: my-list_loader, 
properties: { 
    dataLoaded: { 
    type: Boolean, 
    reflectToAttribute: true 
    } 
}

然後在父綁定的屬性，像這樣：

<my-list_loader data-loaded="{{dataLoaded}}"></my-list_loader>

來源

2016-12-03 17:22:32

嗯..我認爲這是行不通的。我正在做一些類似的事情，但在父母中，每次檢查條件時，子項中的子項都未完全加載，則檢查返回錯誤結果。我認爲所要求的解決方案必須包括從兒童到家長的某種類型的通知機制，以實現預期的結果。無論如何謝謝 – RubenDFC

關於數據屬性的觀察者呢？如果您事先知道數據長度是多少，您可以與之比較 –

您能以任何方式說明嗎？我知道如何觀察元素的屬性，但是我不知道如何在父類中觀察孩子的屬性 – RubenDFC

聚合物如何檢查子元素準備

回答

相關問題