Question

我在Polymer 2中有一个非常简单的应用程序。我有一个静态的项目列表，用dom-repeat显示。我有一个删除按钮，点击后我可以看到该项目已从列表中删除。但dom-repeat没有刷新。它仍旧是旧代码。

有人可以帮助您了解如何在屏幕上反映更改：

代码段如下：

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-list/iron-list.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/app-storage/app-localstorage/app-localstorage-document.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">

<dom-module id="todo-list">
    <template>
        <style>
             :host {
                display: block;
            }

            .ibtn {
                float: right;
            }

            .item {
                width: 500px;
            }

            paper-icon-button {
                color: grey;
            }

            .list-todo {
                height: 700px;
                text-align: left;
                -webkit-text-fill-color: brown;
            }

            .list-todo ul li {
                width: 500px;
                font-family: sans-serif;
                font-size: 20px;
            }

            .list-todo .btn-set {
                float: right;
            }
        </style>


        <!-- <app-localstorage-document key="app-store" data="{{todos}}"></app-localstorage-document> -->

        <div class="list-todo">

            <template is="dom-repeat" items="{{todos}}">
                <ul>
                    <li>
                        <iron-icon icon="icons:arrow-forward"></iron-icon>
                        {{item}}
                        <span class="btn-set">
                            <paper-icon-button icon="create"></paper-icon-button>
                            <paper-icon-button icon="delete" on-tap="deleteTodo"></paper-icon-button>
                            <paper-icon-button icon="star"></paper-icon-button>
                        <span>  
                    </li>
                </ul>
            </template>   
    </div>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class TodoList extends Polymer.Element {

        static get is() { return 'todo-list'; }

        static get properties() {
            return {
                todos: {
                    type: Object,
                    value: ["Build the code", "Check Sonar Issues", "Release the APP", "Deploy in Production", "Get Feedback"],
                    notify: true
                }
            };
        }

        populateTodoList() {
            return this.todos;
        }

        deleteTodo(item) {
            this.todos.splice(item.model.index, 1);
            this.todos.flush;
        }
    }

    window.customElements.define(TodoList.is, TodoList);
</script>
</dom-module>

Answer 1

Javascript splice从数组中删除该项，但这并不意味着更改会反映在聚合物shadowRoot中。

要做到这一点，你必须使用聚合物阵列突变方法。请参阅this。

在你的情况下将是：

this.splice('todos', item.model.index, 1);

此外，不需要this.todos.flush;。

我检测到的另一件事（与此无关），您确定要在重复内部使用<ul>吗？这创建了一堆列表，每个列表中只有一个项目。

我建议你这样做

<div class="list-todo">
      <ul>
        <template is="dom-repeat" items="{{todos}}">
            <li>
                <iron-icon icon="icons:arrow-forward"></iron-icon>
                {{item}}
                <span class="btn-set">
                    <paper-icon-button icon="create">create</paper-icon-button>
                    <paper-icon-button icon="crystal-icons:lens" on-tap="deleteTodo">delete</paper-icon-button>
                    <paper-icon-button icon="star">star</paper-icon-button>
                <span>
            </li>
        </template>
      </ul>
    </div>

这样您就可以创建一个列表。

当物品被移除时，聚合物2 dom-repeat不会反映出来

1 个答案: