Question

我有一组具有name属性的对象。为了编辑这些对象，我有一个纸张列表框，其中列出了对象的名称，并允许用户按名称选择其中一个对象。在列表框旁边，我有一个带有纸张输入等的表格，用于编辑所选对象的属性。纸张输入之一绑定到所选对象的name属性，以便用户可以更改名称。

我的问题是对name属性的更改未反映到列表框中。用户更改名称后，如何更新列表框？

我确认名称更改实际上是在发生，因为当我更改为另一个对象并返回到前一个对象时，更改后的名称仍然存在。问题在于列表框不会更新。

我尝试过类似的事情：

this.notifyPath("myObjects")

但是那什么也没做。

纸张列表框是这样创建的

<paper-listbox selected="{{selectedObjectIndex}}">
    <template is="dom-repeat" items="[[myObjects]]">
        <paper-item>[[item.name]]</paper-item>
    </template>
</paper-listbox>

selectedObjectIndex具有设置所选对象的观察者

selectedPageIndexChanged(newValue, oldValue) {
    ...
    this.selectedObject = this.myObjects[this.selectedObjectIndex];
}

Answer 1

下面是一些可行的而不是可行的示例。（我试图以代码DEMO的形式在codepen上说明代码，这里也是代码的一部分，以便快速检查。

 <paper-listbox selected="{{selectedObjectIndex}}">
  <template is="dom-repeat" items="{{myObjects}}" >
    <paper-item>[[index]].[[item.name]]</paper-item> <br/>
  </template>
 </paper-listbox>
 <paper-input value="{{selectedObject.name}}" ></paper-input>

....

     selectedObjectIndex:{
           type:Number,
           observer:'selectedPageIndexChanged'
         }
      }} 
      static get observers() {return ['nameValueChanged(selectedObject.name)']}
      constructor() {
            super();
       }

       ready() {
            super.ready();

        }

  selectedPageIndexChanged(newValue, oldValue) {

      this.selectedObject = this.myObjects[newValue];
  }
 nameValueChanged(name){
      //this.myObjects[this.selectedObjectIndex].name = name;
      //this.set('myObjects.' + this.selectedObjectIndex + ".name", name ) // --> Does not work
      this.set('myObjects.' + this.selectedObjectIndex, { name: name} ) // --> Works
      // this.splice('myObjects', this.selectedObjectIndex,1, this.selectedObject) -- Does not work

      //this.notifyPath('myObjects.' + this.selectedObjectIndex + ".name") // -- works (with one of above)

 }
}

上面签名的Does not work行更改了对象，但在dom-repeat上不可观察

聚合物2更新纸张列表框项目

1 个答案: