Polymer 1.x：正在访问 iron 列表中的 'selected' 项

Question

如何访问元素、属性并以其他方式遍历 iron-list 的 selected 项？

打开控制台。
Select 列表中的两个或三个项目。
单击标有 "Show items in console."
请注意控制台输出的最后三行中的输出问题。它们显示未定义的数组长度，任何对象键应该为空的数组。

那么，我们如何访问这些选定项的值？

http://jsbin.com/duwasisoyo/1/edit?html,输出

_showItems: function(){
  console.log(this.selectedList);            // Okay
  console.log(this.selectedList[0]);         // Okay
  console.log(this.selectedList[0]['name']); // Okay
  console.log(this.selectedLength);          // Undefined
  console.log(this.selectedKeys);            // Empty array
  console.log(this.selectedNames);           // Empty array
}

注：This question uses the source code of the iron-list "selected items" demo.

Answer 1

也许 iron-list 没有通知 selectedList 上的更改。您可以将方法更改为

    _showItems: function(){
      console.log(this.selectedList);
      console.log(this.selectedList[0]);
      console.log(this.selectedList[0]['name']); 
      console.log(this._computeSelectedItemsLength(this.selectedList)); 
      console.log(this._computeSelectedKeys(this.selectedList));
      console.log(this._computeSelectedNames(this.selectedList));
    }

此外，您还应该更改：

    _computeSelectedNames: function(ob) {
      var out = [];
      for(x in ob){
        out.push(ob[x]['name']);
      }
      return out;
    },

啊，添加控件以检查 selectedList 是否为空 ;)

Answer 2

来自 Polymer Slack 网站的@jeanpokou 说：

maybe you need to use <array-selector id="selector" items="{{employees}}" selected="{{selected}}" multi toggle></array-selector> like suggested here https://www.polymer-project.org/1.0/docs/devguide/templates.html#array-selector

Answer 3

来自 Polymer Slack 网站的@rob 说：

here's a fixed version https://jsbin.com/hiruducole/1/edit?html,output

you need to observer (selectedItems.*)

then you can use the change record to figure out what changed

https://www.polymer-project.org/1.0/docs/devguide/properties.html#array-observation

you could also observe (selectedItems.splices) but I'm lazy and just do (selectedItems.*) which will catch any changes.

Here's an explanation on change records and whatnot: https://www.polymer-project.org/1.0/docs/devguide/properties.html#deep-observation

关键变化：https://jsbin.com/hiruducole/1/edit?html,output

/** / Before
selectedLength: {
  computed: '_computeSelectedLength(selectedItems)'
},
/**/
// After
selectedLength: {
  computed: '_computeSelectedLength(selectedItems.*)'
},
...
/** / Before
_computeSelectedLength: function(ar) {
  return ar.length;
},
/**/
// After
_computeSelectedLength: function(record) {
  return record.base.length;
},

Polymer 1.x：正在访问 iron 列表中的 'selected' 项

Polymer 1.x: Accessing 'selected' items from iron list

javascript

polymer

polymer-1.0