Question

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

当我更改一个纸张输入元素上的文本时，虽然引用的对象已更改，但另一个纸质元素不会更改。

以下详细信息：

＆GT;＆GT;＆GT;浏览器

＆GT;＆GT;＆GT; 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>

＆GT;＆GT;＆GT; 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)

Answer 2

@property / @Property()仅适用于Polymer元素。对模型类成员使用@reflectable。

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
模型中的递归使得这非常具有挑战性。也许有一种更简单的方法，但这是我能够做的工作。

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

2 个答案: