熨斗列表保持選擇突出顯示在刷新

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

問題的主要癥結在於此時沒有跟蹤到iron-list內部的selectItem（）函數的更改事件，並且正在跟蹤的selectedItem對象而不是索引。也許，根據你的Github問題，選擇應該被添加爲一個索引正是因爲這個原因。因此，我認爲一個更完整的版本會屬於PR，爲組件添加一些有價值的功能。但是，因爲您需要將這些元素中的兩個元素包含在某種父類中，這並不太粗糙。

在這裏，我捕捉selectedItem更改事件並使用該點處的數據來處理選定的索引，我將這個索引存儲在iron-localstorage的值中。然後，當有一些東西從localStorage中加載出來時，我使用該索引來選擇iron-list中的selectionItem（）。

<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>