dart - 在不同实例变量上引用同一对象的两个 polymer 元素(纸张输入)不起作用

Question

我有两个聚合物元素(纸张输入)在不同的实例变量上引用同一对象。

当我在一个纸张输入元素上更改文本时，尽管所引用的对象已更改，但另一个纸张元素没有更改。

以下详细信息:

>>>浏览器



>>> 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();
  }
}

这是错误还是需要做的其他事情？

Answer 1

这不是错误，因为Polymer不会观察内部属性的变化，因此，当您编辑描述时，值将被更新，但其他输入不会得到通知，并且不会更新其值。

解决您的问题的一种方法是在输入元素中添加一个on-change处理程序。在侦听器代码中，调用this.notifyPath(itemPath)。

您需要生成正确的路径，例如'produtos.3.descricao'，因此您需要元素的索引。为此，您可以使用indexForElement的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)