Javascript 模板内元素的此.$$（选择器）（查询选择器）重复

我只是试图通过模板的自定义属性在模板内部获取一个元素。代码如下：

<dom-module id="order-customize-sauces">
<link rel="stylesheet" href="order-customize-sauces.css"/>
<template>
    <center>
        <div style="width:100%; height:80px;">
            <input class="customize-search" title="Filter The List By A Search Term" placeholder="Search List..." value="{{searchValue::input}}" type="text" on-keyup="filterSelections"></input>
            <iron-icon icon="search" style="float:right;margin-right:5px;"></iron-icon>
        </div>
        <div style="height:300px;width:100%;">
            <template id="saucesRepeat" is="dom-repeat" items="{{repeat}}" filter="{{filterSelections(searchValue)}}">
                <paper-button data-sauce$="{{item.code}}" class$="button-{{item.SELECTED}}" raised on-click="buttonClick">{{item.name}}</paper-button>
            </template>
        </div>
    </center>
<div style="margin-top:300px">&nbsp;</div>
</template>
<script src="order-customize-sauces.js"></script>

尝试2：

var items = Polymer.dom(this.$.saucesRepeat).node.__data__.items;
  console.log(this.$$("[data-sauce]"));

尝试3：

this.$$("[data-sauce]");

我做错了吗？如何在模板内选择元素？另外，我没有使用JQuery，所以如果这可以是javascript或聚合物特定的，那就太好了

编辑：

我添加了完整的JS代码来帮助调试

问题所在的主要功能是“changeButtonColor”功能。这是在一系列函数之后调用的，但都是从“passCurrentItem”函数开始的。此外，此元素是另一个元素的子元素，该元素调用此元素函数，如下所示：

this.$.allSaucesOptions.passCurrentItem(mynewarray);

“AllSauceOptions”是给“order customize sauces”元素的id

完整JS代码：

Polymer({
is:"order-customize-sauces",
behaviors: [
    Polymer.NeonSharedElementAnimatableBehavior
],
properties:{
    animationConfig: {
        value: function() {
            return {
                'entry':[
            {
              name:'fade-in-animation',
              node:this
            }],
                'exit':[
            {
              name:'fade-out-animation',
              node:this
            }]
            }
        }
    },
},
//--------------------------------------------------
ready:function(){
  this.repeat = [];
  this.currentItem = [];
  this.originalArray = [];
},
//--------------------------------------------------
passCurrentList:function(list){
  this.originalArray = list;
},
//--------------------------------------------------
passCurrentItem:function(array) {
  var i;
  this.currentItem.length = 0;
  for(var i=0; i < array.length; i++) {
      this.currentItem.push({name: array[i].name, code: array[i].code, price: array[i].price, SELECTED: array[i].SELECTED});
  }
  this.resetRepeatArray();              //everything above works!!
  this.updateArray();                 //update visually
},
//--------------------------------------------------
resetRepeatArray:function(){                      //testing working!!!!
  var i;
  for(i=0; i < this.originalArray.length; i++) {
      this.originalArray[i].SELECTED = 0;
  }
  this.repeat = this.originalArray;
},
//--------------------------------------------------
updateArray:function() {
  var i;
  //for(i =0; i < this.repeat.length; i++) {
      //this.repeat[i] = {name: this.repeat[i].name, code: this.repeat[i].code, price: this.repeat[i].price, SELECTED: this.repeat[i].SELECTED};
      //this.changeButtonColor(0,this.repeat[i].code);
  //}

  for(i = 0; i < this.currentItem.length; i++) {
      //index = this.repeat.map(function(d) { return d['code']; }).indexOf(this.currentItem[i].code);
      //this.set("repeat.index",{name: this.currentItem[i].name, code: this.currentItem[i].code, 
      //                        price: this.currentItem[i].price, SELECTED: this.currentItem[i].SELECTED});
      console.log("set color "+this.currentItem[i].name);
      this.changeButtonColor(this.currentItem[i].SELECTED,this.currentItem[i].code);  //this isn't working
  }
},
//--------------------------------------------------
changeButtonColor:function(number, id) {
  var defaultClassValues = " style-scope order-customize-sauces x-scope paper-button-0";
  var defaultClass ="button-";
  // var items = Polymer.dom(this.$.saucesRepeat).node.__data__.items;
  // console.log(this.$$("[data-sauce]"));
  // var repeaters = document.querySelector('template[is="dom-repeat"]')
  var element = this.$$("[data-sauce]"); 
  console.log(element);
  // for(var i=0; i < items.length; i++) {
  //     if(items[i].code === id) {
  //         Polymer.dom(this.$.saucesRepeat).node.__data__.items[i].SELECTED = number;
  //     }
  // }
  // var element = this.getElementByAttributeValue("data-sauce",id);
  // if(element != null){
  //     element.className = defaultClass+number+defaultClassValues;
      // console.log(element.className);
  // }
},
//--------------------------------------------------
getElementByAttributeValue: function(attribute, value){
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++) {
      if (allElements[i].getAttribute(attribute) === value){
          // Element exists with attribute. Add to array.
          matchingElements.push(allElements[i]);
      }
  }
  return matchingElements[0];
},
//--------------------------------------------------
isNumber:function(selected, number) {
  selected = (selected == null)?0:selected;
  if(selected == number) {
    return false;
  }
  else {
    return true;
  }
},
//--------------------------------------------------
removeFromArray:function(itemName) {
  var index, i;
  for(i = 0; i < this.currentItem.length; i++) {
      if(this.currentItem[i].name == itemName || this.currentItem[i].code == itemName) {
          index = i;
          break;
      }
  }
  if(index > -1) {
      this.currentItem.splice(index, 1);
  }
},
//--------------------------------------------------
buttonClick:function(e){
  var item = e.model.__data__.item;
  item.SELECTED = this.setSelectedNumber(item.SELECTED);
  var number = item.SELECTED;

  if(number > 3) {//original item
      this.currentItem[0] = {name: item.name, code: item.code, price: item.price, SELECTED: 4};//change original item to new values
      if(this.currentItem[1] != null) {                        //is there another item selected?
         this.removeFromArray(this.currentItem[1].code);      //make original item the only thing in array
      }
  }
  else if(number < 4) {//not original item
      this.currentItem[0] = {name: this.currentItem[0].name, code: this.currentItem[0].code, price: this.currentItem[0].price, SELECTED: 4};//unselect original item -- don't remove from array
      if(this.currentItem[1] == null) {                        //is this the first time selecting a new item?
          this.currentItem.push({name: item.name, code: item.code, price: item.price, SELECTED: item.SELECTED});      //add item to a new slot in array
      }
      else{ 
          this.currentItem[1] = {name: item.name, code: item.code, price: item.price, SELECTED: item.SELECTED};    //Update array slot with new information
      }
  }
  this.updateArray();
},
//--------------------------------------------------
setSelectedNumber:function(number) {
  if(number < 8 && number > 3) {
    number += 1;
    if(number > 7) {
      number = 4;
    }
  }
  if(number < 4 || number == null) {
    number = (number == null)?0:number;
    number += 1;
    if(number > 3) {
      number = 0;
    }
  }
  return number;
},
//---------------------------------------------------
filterSelections:function(search) {
  this.resetSauceArray();
  this.changeButtonColor(this.currentItem[0].SELECTED, this.currentItem[0].code);
  if(this.currentItem[1] != null){
      this.changeButtonColor(this.currentItem[1].SELECTED, this.currentItem[1].code);
  }
  return function(item){
      var string;
      if (!search) return true;
      if (!item) return false;
          search = search.toUpperCase();
      if(item.name && ~item.name.toUpperCase().indexOf(search)) {
          return true;
      }
      else {
          return false;
      }
  }
},

聚合物({ 是：“订购定制酱汁”， 行为：[ Polymer.NeonSharedElementAnimatableBehavior ], 特性：{ 动画配置：{ 值：函数（）{ 返回{ “条目”：[ { 名称：'fade-in-animation'， 节点：这个 }], “退出”：[ { 名称：'fade-out-animation'， 节点：这个 }] } } }, }, //-------------------------------------------------- 就绪：函数（）{ this.repeat=[]； this.currentItem=[]； this.originalArray=[]； }, //-------------------------------------------------- passCurrentList:函数（列表）{ this.originalArray=列表； }, //-------------------------------------------------- passCurrentItem:函数（数组）{ var i； this.currentItem.length=0； 对于（var i=0；i-1）{ 此.currentItem.splice（索引1）； } }, //-------------------------------------------------- 按钮点击：功能（e）{ var项目=e.model.\uuuuuu数据\uuuuuuuuu.item； item.SELECTED=此.setSelectedNumber（item.SELECTED）； var编号=所选项目； 如果（编号>3）{//原始项目 this.currentItem[0]={name:item.name，code:item.code，price:item.price，SELECTED:4}；//将原始项更改为新值 如果（this.currentItem[1]！=null）{//是否选择了其他项？ this.removeFromArray（this.currentItem[1].code）；//使原始项成为数组中唯一的项 } } 如果（编号<4）{//不是原始项目，则为else this.currentItem[0]={name:this.currentItem[0]。名称，代码：this.currentItem[0]。代码，价格：this.currentItem[0]。价格，选定项：4}；//取消选择原始项--不从数组中删除 如果（this.currentItem[1]==null）{//是thi

Polymer({
is:"order-customize-sauces",
behaviors: [
    Polymer.NeonSharedElementAnimatableBehavior
],
properties:{
    animationConfig: {
        value: function() {
            return {
                'entry':[
            {
              name:'fade-in-animation',
              node:this
            }],
                'exit':[
            {
              name:'fade-out-animation',
              node:this
            }]
            }
        }
    },
},
//--------------------------------------------------
ready:function(){
  this.repeat = [];
  this.currentItem = [];
  this.originalArray = [];
},
//--------------------------------------------------
passCurrentList:function(list){
  this.originalArray = list;
},
//--------------------------------------------------
passCurrentItem:function(array) {
  var i;
  this.currentItem.length = 0;
  for(var i=0; i < array.length; i++) {
      this.currentItem.push({name: array[i].name, code: array[i].code, price: array[i].price, SELECTED: array[i].SELECTED});
  }
  this.resetRepeatArray();              //everything above works!!
  this.updateArray();                 //update visually
},
//--------------------------------------------------
resetRepeatArray:function(){                      //testing working!!!!
  var i;
  for(i=0; i < this.originalArray.length; i++) {
      this.originalArray[i].SELECTED = 0;
  }
  this.repeat = this.originalArray;
},
//--------------------------------------------------
updateArray:function() {
  var i;
  //for(i =0; i < this.repeat.length; i++) {
      //this.repeat[i] = {name: this.repeat[i].name, code: this.repeat[i].code, price: this.repeat[i].price, SELECTED: this.repeat[i].SELECTED};
      //this.changeButtonColor(0,this.repeat[i].code);
  //}

  for(i = 0; i < this.currentItem.length; i++) {
      //index = this.repeat.map(function(d) { return d['code']; }).indexOf(this.currentItem[i].code);
      //this.set("repeat.index",{name: this.currentItem[i].name, code: this.currentItem[i].code, 
      //                        price: this.currentItem[i].price, SELECTED: this.currentItem[i].SELECTED});
      console.log("set color "+this.currentItem[i].name);
      this.changeButtonColor(this.currentItem[i].SELECTED,this.currentItem[i].code);  //this isn't working
  }
},
//--------------------------------------------------
changeButtonColor:function(number, id) {
  var defaultClassValues = " style-scope order-customize-sauces x-scope paper-button-0";
  var defaultClass ="button-";
  // var items = Polymer.dom(this.$.saucesRepeat).node.__data__.items;
  // console.log(this.$$("[data-sauce]"));
  // var repeaters = document.querySelector('template[is="dom-repeat"]')
  var element = this.$$("[data-sauce]"); 
  console.log(element);
  // for(var i=0; i < items.length; i++) {
  //     if(items[i].code === id) {
  //         Polymer.dom(this.$.saucesRepeat).node.__data__.items[i].SELECTED = number;
  //     }
  // }
  // var element = this.getElementByAttributeValue("data-sauce",id);
  // if(element != null){
  //     element.className = defaultClass+number+defaultClassValues;
      // console.log(element.className);
  // }
},
//--------------------------------------------------
getElementByAttributeValue: function(attribute, value){
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++) {
      if (allElements[i].getAttribute(attribute) === value){
          // Element exists with attribute. Add to array.
          matchingElements.push(allElements[i]);
      }
  }
  return matchingElements[0];
},
//--------------------------------------------------
isNumber:function(selected, number) {
  selected = (selected == null)?0:selected;
  if(selected == number) {
    return false;
  }
  else {
    return true;
  }
},
//--------------------------------------------------
removeFromArray:function(itemName) {
  var index, i;
  for(i = 0; i < this.currentItem.length; i++) {
      if(this.currentItem[i].name == itemName || this.currentItem[i].code == itemName) {
          index = i;
          break;
      }
  }
  if(index > -1) {
      this.currentItem.splice(index, 1);
  }
},
//--------------------------------------------------
buttonClick:function(e){
  var item = e.model.__data__.item;
  item.SELECTED = this.setSelectedNumber(item.SELECTED);
  var number = item.SELECTED;

  if(number > 3) {//original item
      this.currentItem[0] = {name: item.name, code: item.code, price: item.price, SELECTED: 4};//change original item to new values
      if(this.currentItem[1] != null) {                        //is there another item selected?
         this.removeFromArray(this.currentItem[1].code);      //make original item the only thing in array
      }
  }
  else if(number < 4) {//not original item
      this.currentItem[0] = {name: this.currentItem[0].name, code: this.currentItem[0].code, price: this.currentItem[0].price, SELECTED: 4};//unselect original item -- don't remove from array
      if(this.currentItem[1] == null) {                        //is this the first time selecting a new item?
          this.currentItem.push({name: item.name, code: item.code, price: item.price, SELECTED: item.SELECTED});      //add item to a new slot in array
      }
      else{ 
          this.currentItem[1] = {name: item.name, code: item.code, price: item.price, SELECTED: item.SELECTED};    //Update array slot with new information
      }
  }
  this.updateArray();
},
//--------------------------------------------------
setSelectedNumber:function(number) {
  if(number < 8 && number > 3) {
    number += 1;
    if(number > 7) {
      number = 4;
    }
  }
  if(number < 4 || number == null) {
    number = (number == null)?0:number;
    number += 1;
    if(number > 3) {
      number = 0;
    }
  }
  return number;
},
//---------------------------------------------------
filterSelections:function(search) {
  this.resetSauceArray();
  this.changeButtonColor(this.currentItem[0].SELECTED, this.currentItem[0].code);
  if(this.currentItem[1] != null){
      this.changeButtonColor(this.currentItem[1].SELECTED, this.currentItem[1].code);
  }
  return function(item){
      var string;
      if (!search) return true;
      if (!item) return false;
          search = search.toUpperCase();
      if(item.name && ~item.name.toUpperCase().indexOf(search)) {
          return true;
      }
      else {
          return false;
      }
  }
},