Ist es möglich, ein Polymer-Element ohne HTML zu erstellen?

Question

Mein Endziel ist HTML nicht so schreiben hat:

<div id='counter'> 
    {{counter}} 
    </div> 

    <div> 
    <button 
     id="startButton" 
     on-click="{{start}}"> 
     Start 
    </button> 
    <button 
     id="stopButton" 
     on-click="{{stop}}"> 
     Stop 
    </button> 
    <button 
     id="resetButton" 
     on-click="{{reset}}"> 
     Reset 
    </button> 
</div> 

Ich würde gerne wissen, ob es möglich ist, ohne die Verwendung von HTML ein Polymer-Elemente zu erstellen. Zum Beispiel habe ich versucht, dies:

@CustomTag('tute-stopwatch') 
class TuteStopWatch extends PolymerElement { 

ButtonElement startButton, 
    stopButton, 
    resetButton; 

    @observable String counter = '00:00'; 

    TuteStopWatch.created() : super.created() { 
    createShadowRoot()..children = [ 
     new DivElement()..text = '{{counter}}', 

     new DivElement()..children = [ 
     startButton = new ButtonElement()..text = 'Start' 
      ..onClick.listen(start), 
     stopButton = new ButtonElement()..text = 'Stop' 
      ..onClick.listen(stop), 
     resetButton = new ButtonElement()..text = 'Reset' 
      ..onClick.listen(reset) 
     ] 
    ]; 
    } 
} 

vorheriger Code erstellt richtig Wurzel HTML und Schatten, aber es ist die Bindung zwischen den @observable counter und dem Text der DivElement nicht zu erstellen.

Ich weiß, dass dies verursacht wird, weil ich versuche, die Schattenwurzel zu erstellen, nachdem das Element instanziiert/erstellt wurde. Damit ich die Vorlage des Elements an anderer Stelle erstellen kann, bevor die Vorlage mit ihrer Observablen gebunden wurde.

Answer 1

Sie können ein manuelles Schreiben von Daten wie diese Bindung.

changes.listen((changes) { 
    for (var change in changes) { 
     if (change.name == #counter) { 
      myDivElement.text = change.newValue; 
     } 
    } 
    }); 

changes ist eine Eigenschaft der Observable-Klasse, die PolymerElement Mischungen in (Das ist schwer in der API-Referenz, um zu sehen, wie es derzeit doesn 't zeigen eine Klasse' Mixins oder die gemischten Eigenschaften und Methoden. '

Polymer scheint hauptsächlich über die Ermöglichung deklarative HTML-basierte Bindungen zu sein. Es kann sich lohnen, mit benutzerdefinierten Elementen und Shadow Dom direkt zu experimentieren, da Sie in diesem Beispiel kein Polymer für irgendetwas verwenden. Dazu müssen Sie die Klassendefinition ändern:

class TuteStopWatch extends HtmlElement with Observable { 
    ... 
    } 

und registrieren Sie Ihr Element mit document.register(). Sie müssen auch das polymer.js-Polyfill für benutzerdefinierte Elemente einschließen.