聚合物1.x：訪問鐵列表中的“選定”項目

Question

如何訪問元素，屬性，否則如何迭代iron-list的selected項目？

這是JSBin 。

1. 打開控制台。
2. 從列表中選擇兩個或三個項目。
3. 單擊標有“在控制台中顯示項目”的按鈕。
4. 注意控制台輸出的最后三行中的輸出問題。 它們顯示未定義的數組長度，以及任何對象鍵應為空的數組。

那么，我們如何訪問這些選定項的值？

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

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

注意： 此問題使用iron-list “ selected items” demo的源代碼 。

Answer 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不為空;）

Answer 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

Answer 3

來自Polymer Slack網站的@rob說：

這是固定版本https://jsbin.com/hiruducole/1/edit?html，輸出

您需要觀察者（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，輸出

 /** / 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; },