Question

父元素：

var currentUser = this.modelFor('user');

store.find('user', currentUser.id).then(function (user) {
 user.deleteRecord();
  user.get('isDeleted'); // => true
  user.save(); // => DELETE to /users/:id
});

// OR
store.find('user', currentUser.id).then(function (user) {
  user.destroyRecord(); // => DELETE to /users/:id
});

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

如何通知父元素'my-list_loader'已完成加载数据。我需要这个来在'父元素'中执行一系列操作。即：关闭微调器并使用加载的数据填充下拉列表（在自定义处理之后）

我试图复制我当前的场景：

index.html

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

我的loader：custom-loader.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>

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

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

这是c-5模块：

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

我尝试使用dataLoaded作为sugested但我没有预期的：我收到这个控制台日志：

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

我从未调用过c-5中的dataLoaded observer（list_changed）。我需要在c-5这样的通知。

Answer 1

在my-list_loader的数据加载方法中，设置属性loadingFinished，然后在父级中测试该属性。将属性反映为类似的属性

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

然后在父绑定到属性，如：

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

聚合物如何检查子元素是否准备好

1 个答案: