文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >聚合物如何检查子元素是否就绪

问聚合物如何检查子元素是否就绪
EN

Stack Overflow用户
提问于 2016-12-03 12:18:03
回答 1查看 1.2K关注 0票数 0

父元素：

代码语言：javascript
复制
...
<template>
    <my-list_loader></my-list_loader>
</template>
...

我有一个包含另一个自定义元素的自定义元素。my- list _loader是一个自定义元素，它的工作是连接到远程web服务并下载项目列表。这些项存储在名为“items_list”的“my-list-loader”属性中。

如何通知父元素'my-list_loader‘已完成数据加载。我需要它来在“父元素”中执行一堆动作。即:关闭微调器并使用加载的数据填充下拉列表(在自定义处理之后)

我试着复制我现在的场景：

index.html

代码语言：javascript
复制
<!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>

我的加载器: custom-loader.html

代码语言：javascript
复制
<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>

自定义加载器使用另一个子元素: service-items：

代码语言：javascript
复制
<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模块：

代码语言：javascript
复制
<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，但我没有得到预期的结果:我正在获取这个控制台日志：

代码语言：javascript
复制
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观察器(list_changed)从未被调用过。我需要c-5这样的通知。

javascript
polymer
EN

回答 1

Stack Overflow用户

发布于 2016-12-04 01:22:32

在my-list_loader的数据加载方法中，设置一个属性loadingFinished，然后在父级中测试该属性。将属性反映为如下所示的属性

代码语言：javascript
复制
is: my-list_loader,
properties: {
  dataLoaded: {
    type: Boolean,
    reflectToAttribute: true
  }
}

然后在父级绑定到属性，如下所示：

代码语言：javascript
复制
<my-list_loader data-loaded="{{dataLoaded}}"></my-list_loader>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40944170

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档