聚合物阵列突变不会反映到子组件中

Question

Polymer 属性数组突变不会向下反映到子组件我正在使用类似于 Polymer MutableData mixin only honour mutations with notifyPath 的代码。我正在使用通知路径。我有一个网格组件，它更新一个名为 rowInstances 的数组属性。此属性用于驱动 dom-repeat 我希望初始化行对象的地方。我可以在 dom 中打印出 dom-repeat 项，但该值不会将其绑定到子对象

        /* SPDX-License-Identifier: Apache-2.0 */
    /* Copyright Contributors to the ODPi Egeria project. */

    import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
    import { MutableData } from '@polymer/polymer/lib/mixins/mutable-data.js';

    import '@polymer/iron-form/iron-form.js';
    import './prop-row.js';
    import '../shared-styles.js';
    import "@vaadin/vaadin-button/vaadin-button.js";

    class PropGrid extends MutableData(PolymerElement) {
        static get template() {
            return html`
          <style include="shared-styles">
            :host {
              display: inline-block;
              padding: 10px 20px;
            }
            form  { display: table;      }
            p     { display: table-row;  }

          </style>
            <vaadin-button on-click="_onClick">start</vaadin-button>
               <form is="iron-form">
                  <dom-repeat items="[[rowInstances]]" mutable-data>
                    <template>
                      <p>
                         Here is a row [[item]]
                         <prop-row rowInstance=[[item]]> </prop-row>
                      </p>
                     </template>
                  </dom-repeat>
               </form>
        `;
        }

        static get properties() {
            return {

            // all glossaries from the server rest call response
            rowInstances: {
                type: Array,
                notify: true,
                value: function() { return []; },
                observer: '_handleRowInstancesChanged'
            }
          };
        }
        ready(){
            super.ready();
        }
        _onClick(e) {
            // display

            var cell11 = {};
            cell11.name ='aaa';
            cell11.type= 'string';
            cell11.value = ' value1';
            var cell12 = {};
            cell12.name ='bbb';
            cell12.type= 'string';
            cell12.value = ' value2';

            var cell21 = {};
            cell21.name ='ccc';
            cell21.type= 'string';
            cell21.value = ' value3';
            var cell22 = {};
            cell22.name ='ddd';
            cell22.type= 'string';
            cell22.value = ' value4';

            var row1Value = [cell11,cell12];
            var row2Value = [cell21,cell22];

           var row1 = {};
           row1.item = row1Value;
           var row2 = {};
           row2.item = row2Value;
           //this.rowInstances = [];
           this.push('rowInstances',row1);
           this.push('rowInstances',row2);
           this.notifyPath('rowInstances')
        }

       _handleRowInstancesChanged(newValue) {
            console.log('view  _handleRowInstancesChanged array of length ' + newValue.length);
       }
    }

    window.customElements.define('prop-grid', PropGrid);

第class行是

    /* SPDX-License-Identifier: Apache-2.0 */
    /* Copyright Contributors to the ODPi Egeria project. */

    import { PolymerElement, html } from "@polymer/polymer/polymer-element.js";
    import { MutableData } from '@polymer/polymer/lib/mixins/mutable-data.js';
    import '../shared-styles.js';

    class PropRow extends MutableData(PolymerElement) {

     static get template() {
            return html`
          <style include="shared-styles">
            :host {
              display: block;
              padding: 10px 20px;
            }
            a     { display: table-cell; }
          </style>
          PropRow
          <dom-repeat items="[[propertyArray]]" mutable-data>
                <template>
                    item is {{item}}
                </template>
          </dom-repeat>

        `;
        }

        static get properties() {
            return {

                rowInstance: {
                  type: Object,
                  notify: true,
                  observer: '_handleRowInstanceChange'
                },
                propertyArray: {
                    type: Array,
                    notify: true,
                    value: function() { return []; },
                    computed: '_computePropertyArray(rowInstance)'
                }
            };
        }
        ready(){
            super.ready();
        }
        _computePropertyArray(instance) {
             console.log("_computePropertyArray driven");
             return instance.item;
        }
        _handleRowInstanceChange(newValue) {
            console.log("_handleRowInstanceChange" + newValue)
        }

    }

    window.customElements.define('prop-row', PropRow);

我在控制台上看到消息“这是一行...”，但我没有看到 "item is .."。子项（prop-row）class 中的控制台消息都没有出现。文本 PropRow 来自子对象，但不是。我想知道这种嵌套是否有某种限制，或者我在某处犯了错误？

Answer 1

你有一个简单的错误，因为在父级使用 dash-separated 属性而不是驼峰式：

<prop-row row-instance="[[item]]"> </prop-row>

改为：

<prop-row rowInstance=[[item]]> </prop-row>

在子元素中，这个属性将采用驼峰形式，如 rowInstance

这里你的代码有效example

聚合物阵列突变不会反映到子组件中

Polymer Array mutations are not reflected into child component

javascript

arrays

polymer-3.x