聚合物1.x：訪問鐵名單中的'selected'項目

如何訪問元素，屬性或以其他方式遍歷iron-list的selected項目？聚合物1.x：訪問鐵名單中的'selected'項目

打開控制檯。
從列表中選擇兩個或三個項目。
單擊標有「在控制檯中顯示項目」的按鈕。
注意控制檯輸出最後三行輸出的問題。它們顯示未定義的數組長度和任何對象鍵應該是空的數組。

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

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 
}

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

來源

2016-01-11 Mowzer

鐵-list元素演示做這個。只需查看源代碼。 –

@GünterZöchbauer：這個問題使用你描述的鐵列表演示的源代碼。請仔細看一下這個問題。該演示直接綁定到所選項目的數據源。在這個問題中，我想訪問並迭代（即操縱）數據源來修改它。似乎沒有辦法做到這一點。 – Mowzer

'selectedLength'，'selectedKeys'和'selectedNames'不在[documentation]（https://elements.polymer-project.org/elements/iron-list#selectedItems）中......你想要精確地獲得什麼？ – squaleLis

@rob說：（selectedItems *）

這裏有一個固定的版本https://jsbin.com/hiruducole/1/edit?html,output

你需要觀察

那麼你可以使用更改記錄找出發生了什麼變化

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

來源

2016-01-12 03:23:27 Mowzer

也許iron-list不會通知selectedList上的更改。從聚合物）

來源

2016-01-11 08:59:47 squaleLis

@jeanpokou;

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

啊，添加控件檢查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)); 
    }

此外，你也應該改變Slack Site說：

也許你需要使用<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

來源

2016-01-11 21:32:09 Mowzer

聚合物1.x：訪問鐵名單中的'selected'項目

回答

相關問題