iron-data-table selected-item выбрасывает 'ноль' при повторном выборе текущего элемента

В iron-data-table, когда я нажимаю на любую выбранную строку, я ожидаю selected-item ({{selectedItem}}) объект для отображения текущей (и ранее) выбранной строки; но вместо этого становится null,

Шаги для воссоздания проблемы:

  1. Откройте этот jsBin.
  2. Выберите любую строку.
  3. Обратите внимание, что выбранный объект печатается в верхней части страницы и на консоли.
  4. Выберите другую строку.
  5. Обратите внимание, что вновь выбранный элемент печатается в верхней части страницы и на консоли.
  6. Очистить консоль. (Необязательно. Поможет вам увидеть результаты следующего шага.)
  7. Нажмите на выбранную строку.
  8. уведомление selected-item ({{selectedItem}}) объект сейчас null,

Как я могу исправить это, чтобы выбранный объект был вновь выбранной строкой (которая является ранее выбранной строкой), а не нулевым?

http://jsbin.com/xucemijada/1/edit?html,console,output
<!DOCTYPE html>
<html>  
  <head>
    <base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/">
    <link rel="import" href="polymer/polymer.html">

    <script src="webcomponentsjs/webcomponents-lite.min.js"></script>

    <link rel="import" href="iron-ajax/iron-ajax.html">
    <link rel="import" href="paper-button/paper-button.html">

    <link rel="import" href="iron-data-table/iron-data-table.html">
    <link rel="import" href="iron-data-table/default-styles.html">
  </head>
  <body>
    <x-foo></x-foo>
    <dom-module id="x-foo">
      <template>
        <style>
        </style>
        [[_computeSelectedStr(selectedItem)]]

        <iron-ajax
            auto
            url="https://saulis.github.io/iron-data-table/demo/users.json" 
            last-response="{{users}}"
            >
        </iron-ajax>
        <iron-data-table id="grid"
                         selection-enabled
                         items="[[users.results]]"
                         selected-item="{{selectedItem}}"
                         >
          <data-table-column name="Picture" width="50px" flex="0">
            <template>
              <img src="[[item.user.picture.thumbnail]]">
            </template>
          </data-table-column>
          <data-table-column name="First Name">
            <template>[[item.user.name.first]]</template>
          </data-table-column>
          <data-table-column name="Last Name">
            <template>[[item.user.name.last]]</template>
          </data-table-column>
          <data-table-column name="Email">
            <template>[[item.user.email]]</template>
          </data-table-column>
        </iron-data-table>

      </template>
      <script>
        (function(){
              'use strict';
          Polymer({
            is: 'x-foo',
            observers: [
              '_selectedItemChanged(selectedItem)' ,
            ],
            _selectedItemChanged: function(ob) {
              console.log('selectedItem', ob);
            },
            _computeSelectedStr: function(ob) {
              return JSON.stringify(ob);
            },
          });
        })();
      </script>
    </dom-module>
  </body>
</html>
Источник

1 ответ

Решение

При повторном щелчке строки элемент отменяется и null в selectedItem предназначен для отражения этого. Аналогично, в режиме множественного выбора selectedItems пусто, когда ничего не выбрано.

поскольку v1.0.1<iron-data-table> будет стрелять deselecting-item событие, которое может быть использовано для предотвращения отмены выбора.

table.addEventListener('deselecting-item', function(e) { e.preventDefault(); });

Я обновил ваш JSBin, чтобы показать пример использования этого события: http://jsbin.com/dubuyoy/edit?html,console,output

Источник
Другие вопросы по тегам