Полимер 1.x: удаление элемента из списка железа

Я пытаюсь удалить элемент из iron-list используя следующий код.

мой-element.html
<iron-list id="list" items="[[items]]" as="item"
           selected-items="{{selectedItems}}"
           selection-enabled multi-selection>
  <template>
    <my-item item="[[item]]" on-tap="_onItemTap"></my-item>
  </template>
</iron-list>
...
_onItemTap: function(e) {
  this.items.splice(e.model.index, 1);
}

Ожидаемое поведение

  1. Нажмите элемент списка
  2. Элемент списка исчезает
  3. Выберите следующий элемент списка
  4. Следующий элемент списка выбран

Фактическое поведение

  1. Нажмите элемент списка
  2. Элемент списка не исчезает
  3. Выберите тот же элемент списка (т. Е. Тот, который ранее предназначался для удаления)
  4. Следующий элемент списка фактически выбран (т.е. смещение индекса на единицу)

Вопросы

  • Какой код приведет к желаемому / ожидаемому поведению?
  • Пожалуйста, предоставьте рабочий образец jsBin.
Источник

4 ответа

Решение

Посмотрите этот ответ для конкретного синтаксиса, способствующего проблеме.

Вот рабочий JSBin.

http://jsbin.com/qefemoloxi/1/edit?html,console,output
<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-button/paper-button.html" rel="import">
  <link href="iron-list/iron-list.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style>
    iron-list {
      height: 100vh;
    }
  </style>
  <iron-list id="list" items="[[items]]" as="item">
    <template>
      <paper-button on-tap="_deleteItem">[[item.name]]</paper-button>
    </template>
  </iron-list>
</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        items: {
          type: Array,
          value: function() {
            return [
              { 'name':'foo' },
              { 'name':'bar' },
              { 'name':'qux' },
              { 'name':'baz' },
              { 'name':'quux'}
            ]
          }
        }
      },
      _deleteItem: function(e) {
        console.log(e.model.index);
        this.splice('items', e.model.index, 1);
        this.$.list.fire('resize');
      }
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>
Источник

Смотрите этот ответ для полного кода решения.

Проблема здесь была вызвана тем, что мой item.html файл устанавливал и отображал свойства вне item. имущество. Итак, когда iron-list.(this.)splice('items', e.model.index, 1); метод мутации массива был вызван, не item свойства не были удалены из DOM.

Пример:

мой-список-item.html
this.set(     'name', this.item.foo.bar.qux); // This syntax caused the problem
this.set('item.name', this.item.foo.bar.qux); // This fixed the problem
мой-железо-list.html
this.splice('items', e.model.index, 1);
Источник

Резюме этой страницы предлагает следующую документацию:

Вопрос
app.removeItem = function(index) {
  app.data.splice(index, 1);
  console.log("Removing " + index);
  document.querySelector('#tobuy').fire('resize');
};
Ответить

document.querySelector('#tobuy').push('items', {name: "Foo"})

тогда вам не нужно звонить изменить размер.

ссылка: https://www.polymer-project.org/1.0/docs/devguide/properties.html

Источник

Эта документация по мутации массива предоставляет следующий стандартный код:

заказ element.html
<dom-module id="custom-element">
  <template>
    <template is="dom-repeat"></template>
  </template>
  <script>
    Polymer({
      is: 'custom-element',
      addUser: function(user) {
        this.push('users', user);
      },
      removeUser: function(user) {
        var index = this.users.indexOf(user);
        this.splice('users', index, 1);
      }
    });
  </script>
</dom-module>

Применяя это к этому случаю:

мой-element.html
// As a syntactical matter, replace the following line
// this.items.splice(e.model.index, 1);
// With this line
this.splice('items', e.model.index, 1);
this.$.list.fire('resize');

Проблема с этим решением, однако, заключается в том, что он удаляет последний элемент из iron-list, а не пункт с ожидаемым индексом. Другими словами, он ведет себя так, как и следовало ожидать this.items.pop(),

Также выдает следующее любопытное сообщение об ошибке:

console.log
Uncaught TypeError: <item> should be a valid item
Источник
Другие вопросы по тегам