Polymer 1.0 dom-repeat 在数组更改时未正确通知

Question

我有一个 <paper-dialog> 模态，它就像一种邀请新候选人接受挑战的表格。在 <invite-candidates> 组件中有一个 dom-repeat 为 candidates 列表中的每个对象呈现一个复杂的输入 (<invite-candidate-input>)。

每次我打开（切换）该模式时，我都会清除列表并添加一个新对象 rendered.The 第一次打开页面并打开模式时，我会看到一个输入，正如预期的那样。但是如果我关闭模式然后再次打开它，它会被清除，一个新对象被添加到列表中，但是 dom-repeat 没有被通知。当我单击按钮添加另一个输入时，它会添加到列表中并呈现。但是我的列表现在有 2 个对象，只有 1 个 <invite-candidate-input>.

<dom-module id="candidate-page">
<template>
    <button id="createActionButton" on-click="_toggleDialog"></button>
    <invite-candidates id="inviteCandidates"></invite-candidates>
</template>
<script>
    Polymer({
        is: 'candidate-page',
        properties: {
            Address: String,
            challenges: {
                type: Array,
                notify: true
            }
        },
        _toggleDialog: function () {
            this.$.inviteCandidates.toggle();
        }
    });
</script>

<dom-module id="invite-candidates">
<template>
    <paper-dialog id="dialog" modal style="background: white;">
        <form is="iron-form" id="form">
            <template is="dom-repeat" items="{{candidates}}">
                <invite-candidate-input candidate="{{item}}"></invite-candidate-input>
            </template>
            <div id="addCandidate" on-click="_addCandidate">
                <iron-icon icon="add"></iron-icon>
                <span>Add another candidate</span>
            </div>
            <div class="buttonGroup">
                <paper-button class="primary" raised on-click="inviteCandidates" dialog-confirm>Invite
                </paper-button>
            </div>
        </form>
    </paper-dialog>
</template>
<script>
    Polymer({
        is: 'invite-candidates',
        properties: {
            candidates: {
                type: Array,
                notify: true,
                value: []
            }
        },
        listeners: {
            'candidate-removed': '_removeCandidate'
        },
        toggle: function () {
            this._clearDialog();
            this._addCandidate();
            this.$.dialog.toggle();
        },
        _addCandidate: function () {
            this.push('candidates', {});
        },
        _removeCandidate: function(event){
            var index = this.candidates.indexOf(event.detail);
            this.splice('candidates', index, 1);
        },
        _clearDialog: function () {
            var el;
            while ((el = document.querySelector('invite-candidate-input')) !== null) {
                el.remove();
            }
            this.candidates = [];
        }
    });
</script>

<dom-module id="invite-candidate-input">
<template>
    <div id="inputContainer">
        <paper-input id="address" label="Address" value="{{candidate.Address}}"></paper-input>
        <iron-icon icon="remove" on-click="_removeItem"></iron-icon>
    </div>
    <br>
</template>
<script>
    Polymer({
        is: 'invite-candidate-input',
        properties: {
            challenges: {
                type: Array
            },
            candidate: {
                type: Object,
                reflectToAttribute: true,
                notify: true
            }
        }
        _removeItem: function () {
            this.fire('candidate-removed', this.candidate);
            this.remove();
        }
    });
</script>

Answer 1

这是因为在 _clearDialog 你做了 this.candiates = [];。如果你这样做 this.splice('candidates', this.candidates.length) 它应该工作。

Polymer 1.0 dom-repeat 在数组更改时未正确通知

Polymer 1.0 dom-repeat is not notified properly when array changes

javascript

data-binding

dom

polymer

polymer-1.0