Polymer linkPaths 不会在更改时触发

Question

已编辑：现在有完整的代码

LinkPaths 有效，但不会触发数据更改的元素的所有更改事件。见图：

例如，当在 <paper-input label="Produto" value="{{item.descricao}}"></paper-input>（外部 dom-重复）上更改数据时，元素 <paper-input label="Produto Componente" value="{{item_comp.descricao}}" on-change="mudou"></paper-input>（内部 dom-重复）中的数据也会更改。由于链接路径，它工作得很好！

但是 on-change="mudou" 没有触发。

如果直接在 <paper-input label="Produto Componente" value="{{item_comp.descricao}}" on-change="mudou"></paper-input> 上输入数据则触发（内部 dom-重复）

main_app.html

<dom-module id="main-app">
  <style>
    :host {
      display: block;
    }
  </style>

  <template>
    <h3>Lista de Produtos</h3>
    <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}}" on-change="mudou"></paper-input>
            </div>
          </div>
        </template>
      </div>
    </template>
  </template>
</dom-module>

main_app.dart

import 'dart:html';

import 'package:polymer_elements/paper_input.dart';
import 'package:polymer_elements/paper_fab.dart';
import 'package:polymer_elements/iron_icons.dart';
import 'package:polymer_elements/paper_material.dart';
import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart';

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

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

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

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

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

    linkPaths('produtos.2.componentes.0', 'produtos.#0');
    linkPaths('produtos.2.componentes.1', 'produtos.#1');
    linkPaths('produtos.0', 'produtos.#2.componentes.#0');
    linkPaths('produtos.1', 'produtos.#2.componentes.#1');
  }

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

  @reflectable
  mudou(e, d) {
    window.alert('teste');
  }
}

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

这在 Polymer 中正常吗？我怎样才能强制触发更改？

Answer 1

我找到了解决方法。

我使用了计算绑定方法，没有更多的 on-change 事件。在这种形式下，我在方法调用时传递了纸张输入值引用，并且每次该值发生变化时，都会调用该方法。

代码更改：

.html

...
<paper-input label="Produto Componente" value="{{item_comp.descricao}}"></paper-input>
<span>{{mudou(item_comp.descricao)}}</span>
...

.dart

...
@reflectable
void mudou(a) {
  window.alert('teste');
}
...

Polymer linkPaths 不会在更改时触发

Polymer linkPaths does not fire on-change et all

dart

polymer

dart-polymer

polymer-1.0