Question

已编辑：现已完成代码

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

例如，当在<paper-input label="Produto" value="{{item.descricao}}"></paper-input>（外部dom-repeat）上更改数据时，元素<paper-input label="Produto Componente" value="{{item_comp.descricao}}" on-change="mudou"></paper-input>（内部dom-repeat）中的数据也会发生变化。由于linkPaths，它的效果很好！

但on-change="mudou"没有发射。

如果直接在<paper-input label="Produto Componente" value="{{item_comp.descricao}}" on-change="mudou"></paper-input>（内部dom-repeat）

上输入数据，则触发

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

聚合物中这是正常的吗？我如何能够强制改变火力？

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');
}
...

聚合物linkPaths不会触发更改所有

1 个答案: