Question

我们无法使用polymer@1.4.0运行这个简单的用例。我们有一个项目清单。如果用户单击某个项目，则会显示该项目之前的图标。此外，还会在此项目中添加特定的solve.m课程。

列表将以dom-repeat呈现。每个列表项看起来像：

is-selected

如果用户点击该项目，我们会将值存储在变量{ "label": "Item 1", "value": 0 }中。出于某种原因，dom-repeat将不会重新渲染。所以函数isSelected和getSelectedClass最初只会被调用。但不是在点击互动之后。我们已经尝试在selectItem函数中使用selectedValue。但也要有效果。我们怎么能处理这个？

我们当前的代码：

this.$.listItems.render();

Answer 1

问题在于，您选择某个项目时，dom-if和dom-repeat不会重新触发，因为它们都取决于item不会更改。因此，简单的解决方案是将selectedValue也作为变量添加到您的函数中

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

和js

isSelected: function(item, selectedValue){
  return item.value === selectedValue;
},

getSelectedClass: function(item, selectedValue){
  return this.isSelected(item, selectedValue) ? SELECTED_CLASS : '';
}

<base href="https://polygit.org/polymer+v1.4.0/components/">

<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<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, selectedValue)}}">
          <template is="dom-if" if="{{isSelected(item,selectedValue)}}">
            yes
          </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: function() {
            return [{
              "label": "Item 1",
              "value": 0
            }, {
              "label": "Item 2",
              "value": 1
            }, {
              "label": "Item 3",
              "value": 2
            }]
          }
        },
        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, selectedValue) {
        return item.value === selectedValue;
      },


      /**
       * get selected class if item is selected
       * @param {object} item
       * @returns {string}
       */
      getSelectedClass: function(item, selectedValue) {
        return this.isSelected(item, selectedValue) ? SELECTED_CLASS : '';
      }

    });
  </script>
</dom-module>


<selectable-list></selectable-list>

函数调用dom-repeat只执行一次

1 个答案: