数据绑定结构 object 在我的聚合物元素上没有显示任何变化

Question

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

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

Parent飞镖：

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

Parent html:

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

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

Children飞镖：

@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;
}

Children 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'];
  }
}

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

非常感谢。

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

解决方案

该问题与未在 ContactTile 的构造函数上引发通知有关。我可以通过使用更新属性并通知的 "set" 函数修改联系人来解决此问题。有两种方法可以做到这一点：

一个。 @属性（通知：真）

@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("name", 值);

@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;
}

另外，为了访问 object 属性，我必须使 class 扩展 JsProxy 并将 @属性添加到每个属性（或 @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 class 不是完整的自定义元素，它是否应该继承自 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'];
  }
}

数据绑定结构 object 在我的聚合物元素上没有显示任何变化

Databinding structured object does not show any change on my polymer element

dart

polymer

dart-polymer

polymer-1.0