Polymer 1.x：从铁列表中访问“选定”项目答案

【问题标题】：Polymer 1.x: Accessing 'selected' items from iron listPolymer 1.x：从铁列表中访问“选定”项目
【发布时间】：2016-01-11 08:34:06
【问题描述】：

我如何访问元素、属性以及以其他方式迭代 iron-list 的 selected 项？

Here is the JSBin.

打开控制台。
从列表中选择两个或三个项目。
单击标有“在控制台中显示项目”的按钮。
请注意控制台输出的最后三行中的输出问题。它们显示未定义的数组长度，并且任何对象键应该为空的数组。

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

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.

【问题讨论】：

iron-list 元素演示就是这样做的。只需查看源代码。
@GünterZöchbauer：本题使用你描述的铁名单demo的源码。请仔细看看这个问题。该演示直接绑定到所选项目的数据源。在这个问题中，我想访问和迭代（即操作）数据源来修改它。似乎没有办法做到这一点。
selectedLength、selectedKeys 和selectedNames 不在documentation 中...您要精确获取什么？
@squaleLis：见我上面的评论。
我还想记住 selectedItems 只能被读取并且更新被忽略，并且您需要使用方法来更新选定的项目。不确定，我用了一段时间。

标签： javascript polymer polymer-1.0

【解决方案1】：

也许铁列表没有通知 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 是否为空；）

【讨论】：

【解决方案2】：

Polymer Slack 网站的@jeanpokou 说：

也许你需要使用<array-selector id="selector" items="{{employees}}" selected="{{selected}}" multi toggle></array-selector> 喜欢这里的建议https://www.polymer-project.org/1.0/docs/devguide/templates.html#array-selector

【讨论】：

【解决方案3】：

Polymer Slack 网站的@rob 说：

这是一个固定版本https://jsbin.com/hiruducole/1/edit?html,output

你需要观察者（selectedItems.*）

然后你可以使用更改记录找出更改的内容

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

你也可以观察 (selectedItems.splices) 但我很懒，只做 (selectedItems.*) 会捕捉到任何变化。

以下是关于变更记录之类的解释：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;
},

【讨论】：