Question

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

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

父母飞镖：

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

儿童飞镖：

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

儿童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 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的构造函数上引发的通知有关。我可以通过使用＆＃34; set＆＃34;修改联系人来解决这个问题。更新属性并通知的功能。有两种方法可以做到这一点：

一个。 @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;
}

湾polymerElement.set（＆＃34; name＆＃34;，value）;

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

数据绑定结构化对象在我的聚合物元素

1 个答案: