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

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 不会观察到内部属性更改，因此当您编辑描述时，值会更新，但其他输入不会收到通知，也不会更新它的值。

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

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

的 indexForElement 方法

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

Answer 2

@property/@Property() 仅适用于聚合物元素。使用 @reflectable 模型 class 成员。

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

基于@HugoZapata 的回答，我创建了一个工作示例https://github.com/bwu-dart-playground/polymer1/tree/master/nested_repeat_complex_data
您模型中的递归性使这成为一个相当大的挑战。也许有更简单的方法，但这是我能够做到的。

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

two polymer elements (paper-input) referencing the same object on different instance variable does not work

dart

polymer

dart-polymer