Warum funktionieren die standardmäßigen verschachtelten Polymerwerte nicht?

Question

Ich verwende die neueste 2.0-preview Version von Polymer. Ich möchte Standardeigenschaften festlegen, und die Polymer-Dokumentation beschreibt how to do it in Polymer 1.x. Ich konnte bei diesem Ansatz keine Änderungen für v2.0 finden. Aber es scheint nur für primitive Eigenschaften zu arbeiten und nicht Objekte:

"use strict"; 

class NewElement extends Polymer.Element { 
    static get is() { 
     return 'new-element'; 
    } 

    static get config() { 
     return { 
      properties: { 
       user: { 
        // type: Object, <-- doesn't help anyway 

        firstName: { 
         type: String, 
         value: "John", 
         // observer: '_callObserver' <-- FYI observers don't work properly too if this usage... 
        }, 

        lastName: { 
         type: String, 
         value: "Doe" 
        } 
       }, 
       position: { 
        type: String, 
        value: "Waiter" // <-- will set a high-level default value properly correctly 
       } 
      }, 

      // observers: [ 
      // '_callObserver(user.*)' <-- ...but works using this approach 
      // ] 
     } 
    } 

    constructor() { 
     super(); 
     console.dir(this); // <-- see screenshots below 
     // this.user = { firstName: "John", lastName: "Doe" }; <-- works if initialized manually 
    } 
} 

customElements.define(NewElement.is, NewElement); 

Wie Sie here sehen kann, gibt ein Getter ist, und wenn ich darauf klicke, sehe ich, dass user field is undefined.

Was mache ich falsch?

Answer 1

Es sieht so aus, als ob Sie versuchen, Eigenschaftsdeklarationen zu verschachteln, was nicht unterstützt wird. Sie können eine Objekteigenschaft deklarieren, die Untereigenschaften enthält (keine Eigenschaftsdeklarationen mit type, observer usw.).

Die user Eigenschaft Erklärung:

properties: { 
    user: { 
    type: Object, 
    firstName: { 
     type: String, 
     value: "John", 
    }, 
    lastName: { 
     type: String, 
     value: "Doe" 
    } 
    }, 
}, 

sollte wie folgt aussehen tatsächlich:

properties: { 
    user: { 
    type: Object, 
    value: function() { 
     return { 
     firstName: "John", 
     lastName: "Doe" 
     }; 
    } 
    }, 
}, 

codepen