Question

我有一系列活动。每个活动都有一个名字。当名称输入字段为空时，它是可见的。当用户完成使用后，他们可以按“输入”，它将隐藏输入字段并显示其各自的范围。如果他们希望再次编辑该字段，可以点击 span 以显示输入字段。

我正在使用Polymer 1.6。这是我正在使用的代码：

HTML

<template is="dom-repeat" items="{{referralEvents}}" index-as="index" id="referralEventsElement">
  <span hidden$="{{!item.name.inputHidden}}" item-index="{{index}}" on-tap="showInput">{{item.name.value}}</span>
  <input hidden$="{{item.name.inputHidden}}" placeholder="Name Session" value="{{item.name.value::input}}" on-keypress="checkForEnter" item-index="{{index}}>
</template>

JS

Polymer({
  is: 'create-referral-event',
  properties: {
    referralEvents: {
      type: Array,
      value: [{
        name: {
          value: "Event 1",
          inputHidden: true
        },
        {
        name: {
          value: "Event 2",
          inputHidden: true
        }
      }]
    }
  },
  checkForEnter: function(e){
    if(e.keyCode == 13){
       this.referralEvents[e.target.itemIndex].name.inputHidden = true;
    }
  },
  showInput: function(e){
    this.referralEvents[e.target.itemIndex].name.inputHidden = false;
  });

值变化很好，但它不会更新列表以隐藏或显示元素。有什么想法吗？

Answer 1

我不确定原因，但只有this.set()方法适用于我：

showInput: function(e){
  this.set([
     'referralEvents',
     e.target.itemIndex,
     'name',
     'inputHidden'], false);
}

https://www.polymer-project.org/1.0/docs/devguide/templates

Answer 2

感谢@ tomasz-pluskiewicz的灵感。我测试了它，它也可以使用点分隔的字符串代替数组来访问对象并更改它。

showInput: function(e){
  this.set('referralEvents.' + e.target.itemIndex + '.name.inputHidden', false);
}

聚合物列表未更新为切换内容

2 个答案: