dart - 数据绑定(bind)结构化对象在我的 polymer 元素上没有显示任何变化

Question

我正在将应用程序从 0.5 迁移到 Polymer 1 并使用 Dart。我做得很好，但现在我面临一些数据绑定(bind)问题:

我创建了一个 polymer 元素，它以编程方式在其本地 DOM 上插入另一个提供联系人信息的 polymer 元素。第二个元素将从构造函数获取信息并通过数据绑定(bind)将其显示在界面上。

父 Dart :

@PolymerRegister('test-app')
class TestApp extends PolymerElement {  
  TestApp.created() : super.created();

  attached() {
      super.attached();
      async(() {
          insertTile();
      });
  }

  void insertTile() {
      String contactJSON = '{"contactId":"1", "firstName":"Lex", "surname":"Luthor"}';
      Contact contact = new Contact(JSON.decode(contactJSON));
      ContactTile tile = new ContactTile(contact, this);
      Polymer.dom(this.root).append(tile);
  }
}

父级 html:

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

  <template>
  </template>
</dom-module>

child Dart :

@PolymerRegister('contact-tile')
class ContactTile extends PolymerElement {
    factory ContactTile(Contact contact, Element parent) {
        ContactTile tile = new Element.tag('contact-tile');
        tile.contact = contact;
        return tile;
    }

    ContactTile.created() : super.created();

    @property Contact contact;
}

child html:

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

  <template>
    <div>{{ contact.contactId }}</div>
    <div>{{ contact.firstName }}</div>
    <div>{{ contact.surname }}</div>
  </template>
</dom-module>

联系类(class):

class Contact {
  String contactId;
  String firstName;
  String surname;    

  Contact(Map map) {
    contactId = map['contactId'];
    firstName = map['firstName'];
    surname = map['surname'];
  }
}

由于某种原因，在构造函数上更新联系人后，数据绑定(bind)不会在 Web 界面上显示联系人的任何属性。有人能帮我解决这个问题吗？我已经在 Polymer 0.5 上这样做了很多次，但在 Polymer 1 上这不起作用。

非常感谢。

================================

解决方案

该问题与 ContactTile 的构造函数未引发通知有关。我可以通过使用更新属性并通知的“设置”功能修改联系人来解决此问题。有两种方法可以做到这一点:

a. @Property(通知:true)

@PolymerRegister('contact-tile')
class ContactTile extends PolymerElement {
    factory ContactTile(Contact contact, Element parent) {
        ContactTile tile = new Element.tag('contact-tile');
        tile.contact = contact;
        return tile;
    }

    ContactTile.created() : super.created();

    @Property(notify: true)
    Contact contact;
}

b. polymerElement.set("名称", 值);

@PolymerRegister('contact-tile')
class ContactTile extends PolymerElement {
    factory ContactTile(Contact contact, Element parent) {
        ContactTile tile = new Element.tag('contact-tile');
//        tile.contact = contact;
        tile.set("contact", contact);
        return tile;
    }

    ContactTile.created() : super.created();

    @property
    Contact contact;
}

此外，为了访问对象属性，我必须使类扩展 JsProxy 并向每个属性添加 @property(或为方法添加 @reflectable)。

import 'package:polymer/polymer.dart';

class Contact extends JsProxy {
  @property
  String contactId;
  @property
  String firstName;
  @property
  String surname;

  Contact(Map map) {
    contactId = map['contactId'];
    firstName = map['firstName'];
    surname = map['surname'];
  }
}

Answer 1

由于 Contact 类不是一个完整的自定义元素，因此它应该继承自 JsProxy 并具有属性的注释。这将使属性可以在 html 中访问。如下所示。

class Contact extends JsProxy {
  @property String contactId;
  @property String firstName;
  @property String surname;    

  Contact(Map map) {
    contactId = map['contactId'];
    firstName = map['firstName'];
    surname = map['surname'];
  }
}