Question

我正在尝试保持所选项目在刷新时保持高亮，但我只能存储它，选择不会在刷新时呈现？

<iron-localstorage name="selectedItem" value="{{selectedItem}}"></iron-localstorage>
<iron-list class="flex" items="{{data}}" as="item" selected-item="{{selectedItem}}" selection-enabled>

Answer 1

我之前删除了所有错误的内容，因为这有点像一个疯狂的追逐，并没有考虑到一堆实际上没有用铁跟踪的东西 - 名单。我在这里创建了一个JSBin示例：http://jsbin.com/lataguqoge/1/edit?html

问题的主要症结在于此时没有跟踪到铁列表中的selectItem（）函数的更改事件，并且在对象而不是索引中跟踪selectedItem。也许，根据您的Github问题，选择应该作为索引添加，正是出于这个原因。因此，我认为一个更完全考虑的版本将属于PR，为组件添加一些有价值的功能。但是，因为您需要将这两个元素包装在某些元素中不管怎么说，这种父母太过分了。

我在这里捕捉selectedItem更改事件并使用该点的数据处理选定的索引，我将其保存到iron-localstorage的值中。然后，当有一些东西从localStorage中加载时，我将该索引用于铁列表中的selectItem（）。

<template id="app" is="dom-bind">
    <iron-list items="{{data}}" as="item" selection-enabled on-selected-item-changed="saveSelected">
        <template>
            <div>{{item.name}}<template is="dom-if" if="{{selected}}"><span>{{index}}</span></template></div>      
        </template>
    </iron-list>
    <iron-localstorage name="ironListData" value="{{ironListData}}" on-iron-localstorage-load-empty="initializeDefaultValue" on-iron-localstorage-load="setSelected"></iron-localstorage>
</template>
<script>
  var app = document.querySelector('#app');
  app.data = [
    {
      name: 'First Element'
    },
    {
      name: 'Second Element'
    },
    {
      name: 'Third Element'
    }
  ];
  app.setSelected = function(ev) {
      document.querySelector('iron-list').selectItem(app.ironListData);
  }
  app.saveSelected = function(ev) {
    if (ev.detail.value !== null)
      app.ironListData = document.querySelector('iron-list').items.indexOf(document.querySelector('iron-list').selectedItem);
  }
</script>

铁列表保持选择亮点刷新

1 个答案: