iron-data-table selected-item 抛出 'null' 当再次选择当前选择的项目时
iron-data-table selected-item throws 'null' when currently selected item is selected again
在 iron-data-table
中,当我单击任何 当前选定的行 时,我希望 selected-item
({{selectedItem}}
) 对象来反映当前(和之前)选择的行;但相反,它变成了 null
.
重现问题的步骤:
- Open this jsBin.
- Select 任意行。
- 注意所选对象打印到页面顶部和控制台。
- Select 不同的行。
- 注意新选择的项目打印到页面顶部和控制台。
- 清除控制台。 (可选。将帮助您查看下一步的结果。)
- 单击当前选择的行。
- 注意
selected-item
({{selectedItem}}
) 对象现在是 null
.
如何更正此问题以使所选对象成为新选择的行(即先前选择的行)而不是空值?
http://jsbin.com/xucemijada/1/edit?html,控制台,输出
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="iron-data-table/iron-data-table.html">
<link rel="import" href="iron-data-table/default-styles.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
</style>
[[_computeSelectedStr(selectedItem)]]
<iron-ajax
auto
url="https://saulis.github.io/iron-data-table/demo/users.json"
last-response="{{users}}"
>
</iron-ajax>
<iron-data-table id="grid"
selection-enabled
items="[[users.results]]"
selected-item="{{selectedItem}}"
>
<data-table-column name="Picture" width="50px" flex="0">
<template>
<img src="[[item.user.picture.thumbnail]]">
</template>
</data-table-column>
<data-table-column name="First Name">
<template>[[item.user.name.first]]</template>
</data-table-column>
<data-table-column name="Last Name">
<template>[[item.user.name.last]]</template>
</data-table-column>
<data-table-column name="Email">
<template>[[item.user.email]]</template>
</data-table-column>
</iron-data-table>
</template>
<script>
(function(){
'use strict';
Polymer({
is: 'x-foo',
observers: [
'_selectedItemChanged(selectedItem)' ,
],
_selectedItemChanged: function(ob) {
console.log('selectedItem', ob);
},
_computeSelectedStr: function(ob) {
return JSON.stringify(ob);
},
});
})();
</script>
</dom-module>
</body>
</html>
第二次单击某行时,该项目会被删除select,selectedItem
中的 null
就是为了反映这一点。同样,在 multi-select 模式下,当没有 selected 时,selectedItems
为空。
因为 v1.0.1
<iron-data-table>
将触发 deselecting-item
事件,可以用来防止 deselection.
table.addEventListener('deselecting-item', function(e) {
e.preventDefault();
});
我已经更新了您的 JSBin 以展示如何使用此事件的示例:http://jsbin.com/dubuyoy/edit?html,console,output
在 iron-data-table
中,当我单击任何 当前选定的行 时,我希望 selected-item
({{selectedItem}}
) 对象来反映当前(和之前)选择的行;但相反,它变成了 null
.
重现问题的步骤:
- Open this jsBin.
- Select 任意行。
- 注意所选对象打印到页面顶部和控制台。
- Select 不同的行。
- 注意新选择的项目打印到页面顶部和控制台。
- 清除控制台。 (可选。将帮助您查看下一步的结果。)
- 单击当前选择的行。
- 注意
selected-item
({{selectedItem}}
) 对象现在是null
.
如何更正此问题以使所选对象成为新选择的行(即先前选择的行)而不是空值?
http://jsbin.com/xucemijada/1/edit?html,控制台,输出<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="iron-data-table/iron-data-table.html">
<link rel="import" href="iron-data-table/default-styles.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<style>
</style>
[[_computeSelectedStr(selectedItem)]]
<iron-ajax
auto
url="https://saulis.github.io/iron-data-table/demo/users.json"
last-response="{{users}}"
>
</iron-ajax>
<iron-data-table id="grid"
selection-enabled
items="[[users.results]]"
selected-item="{{selectedItem}}"
>
<data-table-column name="Picture" width="50px" flex="0">
<template>
<img src="[[item.user.picture.thumbnail]]">
</template>
</data-table-column>
<data-table-column name="First Name">
<template>[[item.user.name.first]]</template>
</data-table-column>
<data-table-column name="Last Name">
<template>[[item.user.name.last]]</template>
</data-table-column>
<data-table-column name="Email">
<template>[[item.user.email]]</template>
</data-table-column>
</iron-data-table>
</template>
<script>
(function(){
'use strict';
Polymer({
is: 'x-foo',
observers: [
'_selectedItemChanged(selectedItem)' ,
],
_selectedItemChanged: function(ob) {
console.log('selectedItem', ob);
},
_computeSelectedStr: function(ob) {
return JSON.stringify(ob);
},
});
})();
</script>
</dom-module>
</body>
</html>
第二次单击某行时,该项目会被删除select,selectedItem
中的 null
就是为了反映这一点。同样,在 multi-select 模式下,当没有 selected 时,selectedItems
为空。
因为 v1.0.1
<iron-data-table>
将触发 deselecting-item
事件,可以用来防止 deselection.
table.addEventListener('deselecting-item', function(e) {
e.preventDefault();
});
我已经更新了您的 JSBin 以展示如何使用此事件的示例:http://jsbin.com/dubuyoy/edit?html,console,output