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

问题

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.

Following details:

>>> Browser

>>> 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?

回答1:

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.

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).

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)

回答2:

@property/@Property() is only for Polymer elements. Use @reflectable for model class members.

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

Building on @HugoZapata s answer I created a working example https://github.com/bwu-dart-playground/polymer1/tree/master/nested_repeat_complex_data
The recursivity in your model makes this quite a challenge. Maybe there is a simpler way, but this is what I was able to make work.

来源：https://stackoverflow.com/questions/33427409/two-polymer-elements-paper-input-referencing-the-same-object-on-different-inst

标签

dart

polymer

dart-polymer