Структурированный объект привязки данных не показывает никаких изменений на моем полимерном элементе

Question

Я переношу приложение на Polymer 1 из 0.5 и используя 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']; 
    } 
} 

По некоторым причинам данные связывания не показывают какой-либо из атрибутов контакта на веб-интерфейс после контакта обновляется конструктора. Кто-нибудь может мне помочь? Я делал это много раз на Polymer 0.5, но на Polymer 1 это не работает.

Большое спасибо.

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

РЕШЕНИЕ

Проблема была связана с уведомлением не поднимается на конструктор ContactTile. Я мог бы исправить это, изменив контакт, используя функцию «set», которая обновляет свойство и уведомляет. Существует два способа сделать это:

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