在不同的实例变量上引用同一对象的两个聚合元素（纸输入）不起作用

问题描述

我有两个聚合元素（纸输入）引用不同实例变量上的同一个对象。

I have two polymer elements (paper-input) referencing the same object on different instance variable.

当我改变一个纸输入元素的文本时，另一个

When I change the text on one paper-input element, another paper-element does not change, although the referenced object has changed.

以下详细信息：

>>>浏览器

>>> main_app.html

<dom-module id="main-app">
  <template>
    <h3>Lista de Produtos</h3>
    <paper-fab icon="add" on-tap="adicionarProduto"></paper-fab>
    <template is="dom-repeat" items="{{produtos}}" as="item">
      <div class="layout vertical">
        <paper-material elevation="1">
        <div class="layout horizontal">
          <paper-input label="Produto" value="{{item.descricao}}"></paper-input>
        </div>
        </paper-material>
        <template is="dom-repeat" items="{{item.componentes}}" as="item_comp">
          <div class="layout vertical">
            <div class="layout horizontal">
              <paper-input label="Produto Componente" value="{{item_comp.descricao}}"></paper-input>
            </div>
          </div>
        </template>
      </div>
    </template>
  </template>
</dom-module>

>>> main_app.dart

@PolymerRegister('main-app')
class MainApp extends PolymerElement {
  @property
  List<Produto> produtos = new List();

  MainApp.created() : super.created();

  void ready() {
    Produto p = new Produto()..descricao = 'teste';
    add('produtos', p);

    Produto p2 = new Produto()..descricao = 'teste 2';
    add('produtos', p2);

    Produto p3 = new Produto()..descricao = 'teste3';
    add('produtos', p3);
    add('produtos.2.componentes', p);
    add('produtos.2.componentes', p2);
  }

  @reflectable
  void adicionarProduto(e, d) {
    //...
  }
}

class Produto extends JsProxy {
  @property
  String descricao;
  @property
  List<Produto> componentes;
  Produto() {
    componentes = new List();
  }
}

这是一个错误或其他需要完成？

Is this a bug or something else needs to be done?

推荐答案

这不是一个错误，因为Polymer将不会观察内部属性更改，因此当您编辑描述时，

It's not a bug, because Polymer won't observe internal property changes, so when you edit the description, the value is updated but the other input does not get notified and it doesn't update its value.

一种解决问题的方法是添加一个变更处理程序输入元素。在侦听器代码中调用 this.notifyPath（itemPath）。

One way to solve your problem would be to add an on-change handler to the input elements. In the listener code call this.notifyPath(itemPath).

您需要生成正确的路径，例如'produtos .3.descricao'所以你需要元素的索引。为此，您可以使用 dom-repeat

You need to generate the correct path e.g 'produtos.3.descricao' so you need the index of the element. For that you can use the indexForElement method of the dom-repeat

//inside the change event listener (js code)
//You need to give your dom-repeat and id
var index = this.$.myDomRepeatTemplateId.indexForElement(ev.target)

这篇关于在不同的实例变量上引用同一对象的两个聚合元素（纸输入）不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！