Polymer dom中的函数调用只重复执行一次

我们无法让这个简单的用例与polymer@1.4.0. 我们有一份物品清单。如果用户单击某个项目，将显示该项目前的图标。此外，还选择了一个特定的

，

类将添加到此项目

该列表将使用dom repeat呈现。每个列表项如下所示：

{
  "label": "Item 1",
  "value": 0
}

如果用户单击该项，我们将值存储在变量

selectedValue

中。由于某些原因，dom repeat将不会重新排序。因此，函数isSelected，最初只调用getSelectedClass。但不是在点击交互之后。我们已经尝试使用

this.$.listItems.render（）在selectItem函数中。但也要有效果。我们如何处理这件事

我们的现行守则：

<dom-module id="selectable-list">
  <template>
    <style is="custom-style" include="selectable-list-styles"></style>
    <ul id="selectable-list">
      <template is="dom-repeat" items="[[items]]" id="itemList">
        <li class$="{{getSelectedClass(item)}}">
          <template is="dom-if" if="{{isSelected(item)}}">
            <iron-icon icon="sanitas-icons:check"></iron-icon>
          </template>
          <button type="button" on-click="selectItem">{{item.label}}</button>
        </li>
      </template>
    </ul>
  </template>

  <script>
    var SELECTED_CLASS = 'is-selected';

    Polymer({

      is: 'selectable-list',

      properties: {
        items: {
          type: Array,
          value: []
        },
        selectedValue: {
          type: Object,
          notify: true,
          reflectToAttribute: true
        }
      },

      selectItem: function(event){
        this.selectedValue = event.model.item.value;
      },


      /**
       * check if a list item is selected
       *
       * @param {object} item
       * @returns {boolean}
       */
      isSelected: function(item){
        return item.value === this.selectedValue;
      },


      /**
       * get selected class if item is selected
       * @param {object} item
       * @returns {string}
       */
      getSelectedClass: function(item){
        return this.isSelected(item) ? SELECTED_CLASS : '';
      }

    });
  </script>
</dom-module>




{{item.label}


var SELECTED_CLASS='is SELECTED'；
聚合物({
是：“可选列表”，
特性：{
项目：{
类型：数组，
值：[]
},
selectedValue：{
类型：对象，
通知：正确，
reflectToAttribute:真
}
},
selectItem：功能（事件）{
this.selectedValue=event.model.item.value；
},
/**
*检查是否选择了列表项
*
*@param{object}项
*@returns{boolean}
*/
isSelected:功能（项目）{
return item.value==this.selectedValue；
},
/**
*如果选择了项，则获取所选类
*@param{object}项
*@返回{string}
*/
getSelectedClass:函数（项）{
返回此。isSelected（项目）？SELECTED_类：“”；
}
});
问题在于，如果选择某个项目后，

和

dom repeat

不会重新触发，则您的

dom会出现问题，因为这两个项目都依赖于不会更改的
项目。因此，简单的解决方案是将
selectedValue
也作为变量添加到函数中

<li class$="{{getSelectedClass(item, selectedValue)}}">
  <template is="dom-if" if="{{isSelected(item,selectedValue)}}">






var SELECTED_CLASS='is SELECTED'；
聚合物({
是：“可选列表”，
特性：{
项目：{
类型：数组，
值：函数（）{
返回[{
“标签”：“第1项”，
“值”：0
}, {
“标签”：“第2项”，
“价值”：1
}, {
“标签”：“第3项”，
“价值”：2
}]
}
},
selectedValue：{
类型：对象，
通知：正确，
reflectToAttribute:真
}
},
selectItem：功能（事件）{
this.selectedValue=event.model.item.value；
},
/**
*检查是否选择了列表项
*
*@param{object}项
*@returns{boolean}
*/
isSelected：功能（项目，selectedValue）{
return item.value==selectedValue；
},
/**
*如果选择了项，则获取所选类
*@param{object}项
*@返回{string}
*/
getSelectedClass:函数（项，selectedValue）{
返回此。isSelected（项，selectedValue）？SELECTED\u类：“”；
}
});
问题在于，如果选择某个项目后，
和
dom repeat
不会重新触发，则您的
dom会出现问题，因为这两个项目都依赖于不会更改的
项目。因此，简单的解决方案是将
selectedValue
也作为变量添加到函数中

<li class$="{{getSelectedClass(item, selectedValue)}}">
  <template is="dom-if" if="{{isSelected(item,selectedValue)}}">






var SELECTED_CLASS='is SELECTED'；
聚合物({
是：“可选列表”，
特性：{
项目：{
类型：数组，
值：函数（）{
返回[{
“标签”：“第1项”，
“值”：0
}, {
“标签”：“第2项”，
“价值”：1
}, {
“标签”：“第3项”，
“价值”：2
}]
}
},
selectedValue：{
类型：对象，
通知：正确，
reflectToAttribute:真
}
},
selectItem：功能（事件）{
this.selectedValue=event.model.item.value；
},
/**
*检查是否选择了列表项
*
*@param{object}项
*@returns{boolean}
*/
isSelected：功能（项目，selectedValue）{
return item.value==selectedValue；
},
/**
*如果选择了项，则获取所选类
*@param{object}项
*@返回{string}
*/
getSelectedClass:函数（项，selectedValue）{
返回此。isSelected（项，selectedValue）？SELECTED\u类：“”；
}
});
它正在工作。来自一个棱角分明的世界，我建议所有这些都是开箱即用的，经过几个小时的努力，我几乎发疯了。谢谢！它起作用了。来自一个棱角分明的世界，我建议所有这些都是开箱即用的，经过几个小时的努力，我几乎发疯了。谢谢！