已选择聚合物中的单选按钮

Posted 2021-04-14

我正在加载聚合物中的一个单选按钮组，带有一组4个单选按钮作为问题的答案选项。我有4个问题。现在，如果我在第一个问题中选择一个选项并选择下一个（转到下一个问题），则第二个问题已选择其选项（与第一个问题相同）。为什么会这样？

<paper-radio-group>
  <template is="dom-repeat" items=[[_calculateQuestionOptions(index)]]>
    <paper-radio-button name="{{_calculateId(index)}}">
      [[item.questionOption]]
    </paper-radio-button><br>
  </template>
</paper-radio-group>

下一步和上一步操作的代码

next() {
  if (this.index < this.repos.length-1) { 
    this.index +=1;
  }
}

prev() {
  if (this.index>0) { 
    this.index -= 1; 
  }
} 

解决这个问题。我想将所有答案添加到数组中，并在单击下一个按钮后立即清除选择。像这样的东西。

next() {
  var questionId = this.repos[this.index].questionId;
  if (Polymer.dom(this.root).querySelector("paper-radio-group")) {
    this.answers[questionId] = Polymer.dom(this.root).querySelector("paper-radio-group").selected;
    Polymer.dom(this.root).querySelector("paper-radio-group").selected = null;
  }

  if (this.index < this.repos.length-1) { 
    this.index +=1;
  }

  questionId = this.repos[this.index].questionId;
  if (this.answers[questionId] !== null) {
    Polymer.dom(this.root).querySelector("paper-radio-group").selected = this.answers[questionId];
  }
}

这是唯一的方法还是有更好的方法来做到这一点。

答案

为什么会这样？

之所以发生这种情况是因为dom-repeat在更新时会重用旧元素（为了获得更好的性能，重新创建DOM很慢）。这意味着只更新该范围内的绑定数据。

这是唯一的方法还是有更好的方法来做到这一点。

我认为你的方式已经很好但你仍然可以利用Polymer的优势减少一些代码：

静态节点映射here

复杂的观察者here

我的例子见here

谢谢。