データバインディング構造化オブジェクトは、ポリマー要素に変更を表示しません

Question

アプリケーションを0.5からDartを使用してポリマー1に移行します。私は大丈夫でしたが、今ではいくつかのデータバインディングの問題に直面しています：

連絡先の情報を与える別のポリマー要素をローカルDOMにプログラム的に挿入するポリマー要素を作成しました。 2番目の要素はコンストラクタから情報を取得し、データバインディングを介してインタフェースに表示します。

親ダーツ：

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

Contactクラス：

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ではこれはうまくいきません。

ありがとうございました。問題は、通知に関連していた

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

SOLUTION ContactTileのコンストラクタで生成されません。私はプロパティを更新して通知する "set"関数を使って連絡先を変更することでこれを修正できます。これを行うには2通りの方法があります：

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（ "name"、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; 
} 

はまた、オブジェクトの属性にアクセスするために、私は（メソッドまたは@reflectable）JsProxyを拡張し、すべての属性に@propertyを追加するためのクラスをしなければなりませんでした。 Contactクラスがフルカスタム要素ではないので

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

は、それが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']; 
    } 
}