Polymer 聚合物1.x：切换
我想使用切换项目。 单击员工列表中的一个或多个项目。 请参见以下所选列表中显示的项目。 从顶部员工列表的“静止”中，单击底部所选列表中显示的项目。 请参见“从选定列表中消失”切换项。 在选定列表中，单击一个项目。 请注意，该项不会消失。 如何使所选列表项切换 http://jsbin.com/lodetopuzu/edit?html输出Polymer 聚合物1.x：切换,polymer,polymer-1.0,Polymer,Polymer 1.0,我想使用切换项目。 单击员工列表中的一个或多个项目。 请参见以下所选列表中显示的项目。 从顶部员工列表的“静止”中，单击底部所选列表中显示的项目。 请参见“从选定列表中消失”切换项。 在选定列表中，单击一个项目。 请注意，该项不会消失。 如何使所选列表项切换 http://jsbin.com/lodetopuzu/edit?html输出 <!doctype html> <head> <meta charset="utf-8"> <base hr
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="employee-list">
<template>
<array-selector id="selector"
items="{{employees}}"
selected="{{selected}}"
toggle
multi></array-selector>
<div><strong>Employees</strong>:</div>
<template is="dom-repeat"
id="employeeList"
items="{{employees}}">
<div on-tap="_toggleSelection">
<span>{{item.first}}</span>
<span>{{item.last}}</span>
</div>
</template>
<br />
<div><strong>Selected</strong>:</div>
<template is="dom-repeat" items="{{selected}}">
<div on-tap="_toggleSelection">
<span>{{item.first}}</span>
<span>{{item.last}}</span>
</div>
</template>
</template>
<script>
Polymer({
is: 'employee-list',
properties: {
employees: {
type: Array,
value: function() {
return [
{ first: 'Vince' , last: 'Lombardi' } ,
{ first: 'Weeb' , last: 'Ewbank' } ,
{ first: 'Hank' , last: 'Stram' } ,
{ first: 'Don' , last: 'McCafferty' } ,
{ first: 'Tom' , last: 'Landry' } ,
{ first: 'Don' , last: 'Shula' } ,
{ first: 'Chuck' , last: 'Knoll' } ,
{ first: 'John' , last: 'Madden' } ,
]
},
},
},
_toggleSelection: function(e) {
console.log(e.target);
var item = this.$.employeeList.itemForElement(e.target);
this.$.selector.select(item);
},
});
</script>
</dom-module>
<employee-list></employee-list>
</body>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="employee-list">
<template>
<array-selector id="selector"
items="{{employees}}"
selected="{{selected}}"
toggle
multi></array-selector>
<div><strong>Employees</strong>:</div>
<template is="dom-repeat"
id="employeeList"
items="{{employees}}">
<div on-tap="_toggleSelection">
<span>{{item.first}}</span>
<span>{{item.last}}</span>
</div>
</template>
<br />
<div><strong>Selected</strong>:</div>
<template is="dom-repeat"
id="selectedList"
items="{{selected}}">
<div on-tap="_toggleSelection">
<span>{{item.first}}</span>
<span>{{item.last}}</span>
</div>
</template>
</template>
<script>
Polymer({
is: 'employee-list',
properties: {
employees: {
type: Array,
value: function() {
return [
{ first: 'Vince' , last: 'Lombardi' } ,
{ first: 'Weeb' , last: 'Ewbank' } ,
{ first: 'Hank' , last: 'Stram' } ,
{ first: 'Don' , last: 'McCafferty' } ,
{ first: 'Tom' , last: 'Landry' } ,
{ first: 'Don' , last: 'Shula' } ,
{ first: 'Chuck' , last: 'Knoll' } ,
{ first: 'John' , last: 'Madden' } ,
]
},
},
},
_toggleSelection: function(e) {
var item1 = this.$.selectedList.itemForElement(e.target);
var item2 = this.$.employeeList.itemForElement(e.target);
this.$.selector.select(item1||item2);
},
});
</script>
</dom-module>
<employee-list></employee-list>
</body>
</html>
问题是，您对这两个选项使用相同的_toggleSelection 这一行在_切换选择
单击第二个dom repeat中的项目时无效。问题是您对这两个项目使用了相同的切换选择 这一行在_切换选择
单击第二个dom repeat中的项目时无效。解决方案更改函数
_toggleSelection: function(e) {
var item1 = this.$.selectedList.itemForElement(e.target);
var item = this.$.employeeList.itemForElement(e.target);
this.$.selector.select(item||item1);
}
<template id="selectedList" is="dom-repeat" items="{{selected}}">
解决方案改变功能
_toggleSelection: function(e) {
var item1 = this.$.selectedList.itemForElement(e.target);
var item = this.$.employeeList.itemForElement(e.target);
this.$.selector.select(item||item1);
}
<template id="selectedList" is="dom-repeat" items="{{selected}}">
正如@GünterZöchbauer所说，方法.itemforemente.target应用于$.employeeList引用的元素，它是第一个列表，而不是第二个列表 @Alon提供的解决方案全文如下： http://jsbin.com/yowicumiyu/1/edit?html输出
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="employee-list">
<template>
<array-selector id="selector"
items="{{employees}}"
selected="{{selected}}"
toggle
multi></array-selector>
<div><strong>Employees</strong>:</div>
<template is="dom-repeat"
id="employeeList"
items="{{employees}}">
<div on-tap="_toggleSelection">
<span>{{item.first}}</span>
<span>{{item.last}}</span>
</div>
</template>
<br />
<div><strong>Selected</strong>:</div>
<template is="dom-repeat" items="{{selected}}">
<div on-tap="_toggleSelection">
<span>{{item.first}}</span>
<span>{{item.last}}</span>
</div>
</template>
</template>
<script>
Polymer({
is: 'employee-list',
properties: {
employees: {
type: Array,
value: function() {
return [
{ first: 'Vince' , last: 'Lombardi' } ,
{ first: 'Weeb' , last: 'Ewbank' } ,
{ first: 'Hank' , last: 'Stram' } ,
{ first: 'Don' , last: 'McCafferty' } ,
{ first: 'Tom' , last: 'Landry' } ,
{ first: 'Don' , last: 'Shula' } ,
{ first: 'Chuck' , last: 'Knoll' } ,
{ first: 'John' , last: 'Madden' } ,
]
},
},
},
_toggleSelection: function(e) {
console.log(e.target);
var item = this.$.employeeList.itemForElement(e.target);
this.$.selector.select(item);
},
});
</script>
</dom-module>
<employee-list></employee-list>
</body>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="employee-list">
<template>
<array-selector id="selector"
items="{{employees}}"
selected="{{selected}}"
toggle
multi></array-selector>
<div><strong>Employees</strong>:</div>
<template is="dom-repeat"
id="employeeList"
items="{{employees}}">
<div on-tap="_toggleSelection">
<span>{{item.first}}</span>
<span>{{item.last}}</span>
</div>
</template>
<br />
<div><strong>Selected</strong>:</div>
<template is="dom-repeat"
id="selectedList"
items="{{selected}}">
<div on-tap="_toggleSelection">
<span>{{item.first}}</span>
<span>{{item.last}}</span>
</div>
</template>
</template>
<script>
Polymer({
is: 'employee-list',
properties: {
employees: {
type: Array,
value: function() {
return [
{ first: 'Vince' , last: 'Lombardi' } ,
{ first: 'Weeb' , last: 'Ewbank' } ,
{ first: 'Hank' , last: 'Stram' } ,
{ first: 'Don' , last: 'McCafferty' } ,
{ first: 'Tom' , last: 'Landry' } ,
{ first: 'Don' , last: 'Shula' } ,
{ first: 'Chuck' , last: 'Knoll' } ,
{ first: 'John' , last: 'Madden' } ,
]
},
},
},
_toggleSelection: function(e) {
var item1 = this.$.selectedList.itemForElement(e.target);
var item2 = this.$.employeeList.itemForElement(e.target);
this.$.selector.select(item1||item2);
},
});
</script>
</dom-module>
<employee-list></employee-list>
</body>
</html>
正如@GünterZöchbauer所说，方法.itemforemente.target应用于$.employeeList引用的元素，它是第一个列表，而不是第二个列表 @Alon提供的解决方案全文如下： http://jsbin.com/yowicumiyu/1/edit?html输出
<!doctype html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="employee-list">
<template>
<array-selector id="selector"
items="{{employees}}"
selected="{{selected}}"
toggle
multi></array-selector>
<div><strong>Employees</strong>:</div>
<template is="dom-repeat"
id="employeeList"
items="{{employees}}">
<div on-tap="_toggleSelection">
<span>{{item.first}}</span>
<span>{{item.last}}</span>
</div>
</template>
<br />
<div><strong>Selected</strong>:</div>
<template is="dom-repeat" items="{{selected}}">
<div on-tap="_toggleSelection">
<span>{{item.first}}</span>
<span>{{item.last}}</span>
</div>
</template>
</template>
<script>
Polymer({
is: 'employee-list',
properties: {
employees: {
type: Array,
value: function() {
return [
{ first: 'Vince' , last: 'Lombardi' } ,
{ first: 'Weeb' , last: 'Ewbank' } ,
{ first: 'Hank' , last: 'Stram' } ,
{ first: 'Don' , last: 'McCafferty' } ,
{ first: 'Tom' , last: 'Landry' } ,
{ first: 'Don' , last: 'Shula' } ,
{ first: 'Chuck' , last: 'Knoll' } ,
{ first: 'John' , last: 'Madden' } ,
]
},
},
},
_toggleSelection: function(e) {
console.log(e.target);
var item = this.$.employeeList.itemForElement(e.target);
this.$.selector.select(item);
},
});
</script>
</dom-module>
<employee-list></employee-list>
</body>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<dom-module id="employee-list">
<template>
<array-selector id="selector"
items="{{employees}}"
selected="{{selected}}"
toggle
multi></array-selector>
<div><strong>Employees</strong>:</div>
<template is="dom-repeat"
id="employeeList"
items="{{employees}}">
<div on-tap="_toggleSelection">
<span>{{item.first}}</span>
<span>{{item.last}}</span>
</div>
</template>
<br />
<div><strong>Selected</strong>:</div>
<template is="dom-repeat"
id="selectedList"
items="{{selected}}">
<div on-tap="_toggleSelection">
<span>{{item.first}}</span>
<span>{{item.last}}</span>
</div>
</template>
</template>
<script>
Polymer({
is: 'employee-list',
properties: {
employees: {
type: Array,
value: function() {
return [
{ first: 'Vince' , last: 'Lombardi' } ,
{ first: 'Weeb' , last: 'Ewbank' } ,
{ first: 'Hank' , last: 'Stram' } ,
{ first: 'Don' , last: 'McCafferty' } ,
{ first: 'Tom' , last: 'Landry' } ,
{ first: 'Don' , last: 'Shula' } ,
{ first: 'Chuck' , last: 'Knoll' } ,
{ first: 'John' , last: 'Madden' } ,
]
},
},
},
_toggleSelection: function(e) {
var item1 = this.$.selectedList.itemForElement(e.target);
var item2 = this.$.employeeList.itemForElement(e.target);
this.$.selector.select(item1||item2);
},
});
</script>
</dom-module>
<employee-list></employee-list>
</body>
</html>
我的回答解决了问题？@alon:是的！谢谢！！=]+1我的回答解决了问题？@alon:是的！谢谢！！=]+1.