我使用paper-swatch-picker来挑选颜色，使用dom-repeat来迭代数组。
当我选择颜色时，它不会在数组中更新。
有人可以帮助我将样本选择器color更改为Array。
我可以添加多行，每行有3个颜色选择器（前景，背景和边框）。
我想要的是在我选择颜色时更新我的数组decoratorList。
以下是codepen供参考。 http://codepen.io/khanshahid/pen/wzGrxk
<html>
<head>
<base href="https://polygit.org/polymer+1.4.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="paper-tabs/paper-tab.html">
<link rel="import" href="iron-pages/iron-pages.html">
<link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="iron-input/iron-input.html">
<link rel="import" href="iron-collapse/iron-collapse.html">
<link rel="import" href="paper-material/paper-material.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="paper-input/paper-input-container.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-toast/paper-toast.html">
<link rel="import" href="paper-fab/paper-fab.html">
<link rel="import" href="paper-swatch-picker/paper-swatch-picker.html">
</head>
<body>
<div style="width:1200px;">
<msk-decorator
tag-id= 1
color-list='["#65a5f2", "#83be54", "#f0d551", "#e5943c", "#a96ddb","#aabbcc","#aaa","#ccc","#eee","#333", "transparent", "none"]'
data-type="Enum">
</msk-decorator>
</div>
<dom-module id="msk-decorator">
<template>
<style is="custom-style">
:host{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
};
.flex-horizontal-with-ratios {
@apply(--layout-horizontal);
}
.flexchild {
@apply(--layout-flex);
}
.flex2child {
@apply(--layout-flex-2);
}
.flex-equal-justified {
@apply(--layout-horizontal);
@apply(--layout-justified);
}
.decorator-container{
margin: 15px 5px 15px 5px;
min-height: 160px;
max-height: 240px;
}
.decorator-main{
padding-top: 10px;
min-height: 120px;
max-height: 240px;
overflow-x: hidden;
overflow-y: auto;
}
.decorator-heading-text{
font-size: 14px;
font-weight: 600;
padding-right: 5px;
}
.button-add-decorator{
color: #000;
background-color: #fff;
border: 1px solid #c5c5c5;
margin-left: 10px;
box-shadow: 0 0 7px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 7px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 7px rgba(0,0,0,0.2);
}
.deco-buttons{
float: right;
margin: 0px 5px 0px 0px;
}
.deco-button{
color: #000;
background-color: #fff;
border: 1px solid #c5c5c5;
box-shadow: 0 0 7px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 7px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 7px rgba(0,0,0,0.2);
}
button:hover{
box-shadow: 0 0 7px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 7px rgba(0,0,0,0.6);
-moz-box-shadow: 0 1px 7px rgba(0,0,0,0.6);
}
input, select, textarea, .text, .password{
background: #fff;
}
input:hover, input:active, input:focus, select:hover, select:active, select:focus, textarea:hover,textarea:focus {
border-color: transparent;
box-shadow: 0 0 7px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 7px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 7px rgba(0,0,0,0.5);
}
input[disabled], select[disabled]{
color: #a2a2a2;
background-color: #e1e2e5;
}
.deco-dropdown{
padding-top: 8px;
padding-right: 10px;
padding-left: 10px;
}
.fa .fa-save {
padding-left: 5px;
padding-right: 5px;
}
.label-align{
padding-right: 3px;
}
.deco-row{
border-bottom: 0.5px solid #c3c3c3;
}
</style>
<div class="decorator-container">
<div class="flex-equal-justified decorator-heading-section">
<span class="decorator-heading-text">Decorators
<button class="button-add-decorator" on-tap="addNewDecorator" >+</button>
</span>
<template is="dom-if" if="{{saveFlag}}">
<div class="deco-buttons" style="color: #000;">
<button class="deco-button" on-tap="saveDecorators">Save</button>
</div>
</template>
</div>
<div class="decorator-main">
<form id="decoratorForm">
<template is="dom-repeat" items="{{decoratorList}}">
<div class="flex-horizontal-with-ratios deco-row">
<div class="flex2child" style="padding-left: 5px;">
<span>Text color </span>
<paper-swatch-picker id="textColor" column-count=5 color-list='[[colorList]]' color=[[item.textColor]] noink ></paper-swatch-picker>
</div>
<div class="flex2child">
<span>Cell color </span>
<paper-swatch-picker id="cellColor" column-count=5 color-list='[[colorList]]' color=[[item.cellColor]] noink ></paper-swatch-picker>
</div>
<div class="flex2child">
<span>Border color </span>
<paper-swatch-picker id="borderColor" color=[[item.borderColor]] noink ></paper-swatch-picker>
</div>
<div class="" style="padding-top: 8px; padding-right: 4px;">
<button class="button-add-decorator" on-tap="removeDecorator" id="[[index]]">X</button>
</div>
</div>
</template>
</form>
</div>
</template>
</div>
<script>
Polymer({
is: 'msk-decorator',
properties: {
selectedColor: {
type: String,
value: '#E91E63',
notify: true
},
decoratorList: {
type: Array,
notify: true,
value: []
},
decoratorObject: {
type: Object,
value: {
textColor: '',
cellColor: '',
borderColor: ''
}
},
dataType: {
type: String,
notify: true
},
tagId: {
type: String,
notify: true
},
requestObj: {
type: Object,
value: {
id: null,
addDecorator: [],
editDecorator: [],
deleteDecorator: []
}
},
saveFlag: {
type: Boolean,
notify: true
},
colorList: {
type: Array,
notify: true
},
dataURL:{
type: String,
value: function (){
var url = '/api/FindDecorators';
return url;
}
}
},
ready: function () {
this.init();
},
attached: function() {
},
typeChanged: function(e) {
console.log("typeChanged", e);
},
init: function(){
this.decoratorObject = {
textColor: '#000000',
cellColor: '#000000',
borderColor: '#000000'
};
this.format = [{
id: "9999",
label: "9999"
},
{
id: "9999.9",
label: "9999.9"
},
{
id: "9999.99",
label: "9999.99"
},
{
id: "9999.999",
label: "9999.999"
}];
this.type = [{
id: "NE",
label: "NOT EQUAL"
},
{
id: "E",
label: "EQUAL"
}];
this.value = [{
id: "1",
label: "Running"
},
{
id: "0",
label: "Stopped"
}];
},
addNewDecorator: function(e){
this.push('decoratorList', this.decoratorObject);
this.saveFlag = true;
},
removeDecorator: function(e){
if(e.target.decoratorId > 0){
this.push('deletedDecoratorList',e.target.decoratorId);
}
var i = Polymer.dom(e).rootTarget.id;
this.splice('decoratorList', i, 1);
this.saveFlag = true;
},
showFormat: function(dataTypeValue){
if(dataTypeValue.indexOf('Enum') > -1)
return true;
else
return false;
},
isIdExists: function(tagId){
if(tagId){
return true;
}else{
return false;
}
},
displaySave: function(){
if(this.saveFlag){
return true;
}else{
return false;
}
},
handleResponse: function(res, ele){
this.decoratorList = [];
if(this.decoratorList.length > 0){
this.saveFlag = true;
}else{
this.saveFlag = false;
}
},
saveDecorators: function(){
console.log('saveDecorators' + this.decoratorList);
for(var i=0; i < this.decoratorList.length; i++){
console.log(this.decoratorList[i]);
}
}
});
</script>
</dom-module>
</body>
</html>
答案 0 :(得分：0)
我认为您可以使用value-changed事件返回CustomEvent，其中包含已更改的元素：
attached: function() {
let pickers = this.$.decoratorForm.querySelectorAll('paper-swatch-picker');
pickers.forEeach(el => el.addEventListener('value-changed', event => {
// Do the Array manipulation here based on the event.detail.item
});
}
// also remove the event listener in detached(), but for that you need
// to define the function elsewhere and just passing it's reference to
// the addEventListener.
然后你可以进行this.decoratorList操作，这将与{{decoratorList}}数据绑定同步。
注意：当
value-changed属性发生更改时会触发notify: true事件，因此如果内部事件更改了元素中的多个属性，则可能会多次触发。