Polymer: registrieren ein Verhalten zur Laufzeit

Question

Ich muss das Verhalten einer Polymer-Web-Komponente zur Laufzeit einrichten. Ich habe versucht, das Array "Verhalten" zu ändern, indem ich auf das neue Verhalten drückte, aber es hat nicht funktioniert. Gibt es einen richtigen Weg, es zu tun?

Ich versuche, eine Tabelle Web-Komponente mit einem Pager unten zu erstellen. Es sollte erweiterbar sein, um das Laden von Daten aus einem Javascript-Array, einem erholsamen Service oder einer benutzerdefinierten Quelle zu ermöglichen. Daher habe ich beschlossen, für jede dieser Quellen ein Verhalten zu erstellen und es zu ändern, wenn sich die Quelle ändert. Ist es eine korrekte Art, es zu entwerfen?

Hier als Beispiel the source code des Verhaltens zum Laden von Daten aus einem Array. Er hat folgende Funktion:

itemsLoad: function(page, itemsPerPage, callback) {... 

wird von der Web-Komponente aufgerufen, um Daten einer bestimmten Seite zu laden. Meine Idee ist, dass jedes Verhalten basierend auf dem Typ der Datenquelle (z. B. CSV, JSON usw.) diese Methode auf andere Weise implementiert. Dann wird das Verhalten zur Laufzeit registriert, da zur Laufzeit die Entwickler wissen, welche Quelle sie verwenden soll.

Answer 1

Ich glaube nicht, dass Sie in der Lage sein werden, Verhaltensweisen zur Laufzeit zu ändern, weil sie in den Element-Prototyp gemischt sind.

Sie können ein separates Element für jeden Ihrer Fälle erstellen (csv, json usw.) und Knoten dynamisch nach Bedarf erstellen. Sie könnten als platzieren das Element in Ihrem Raster

<table-component> 
    <json-data-source></json-data-source> 
</table-component> 

Die <table-component> für ein Kind Element aussehen würde, die itemsLoad implementiert die Daten zu erhalten.

EDIT

mit Kind-Knoten arbeiten zu können, Polymer's DOM API verwenden würde. Sie könnten beispielsweise hinzugefügte untergeordnete Knoten abhören und einen auswählen, der die Methode itemsLoad implementiert.

Polymer({ 
    attached: function() { 
    Polymer.dom(this).observeNodes(function(info) { 
     var newNodes = info.addedNodes; 

     for(var i=0; i<newNodes.length; i++) { 
     var dataSource = newNodes[i]; 

     if(dataSource.itemsLoad && typeof dataSource.itemsLoad === 'function') { 
      this.loadItems(dataSource); 
      break; 
     } 
     } 
    }); 
    } 

    loadItems: function(dataSource) { 
    dataSource.itemsLoad().then(...); 
    } 
}); 

Sie Polymer.dom(this).observeNodes mit einfach Iteration über Polymer.dom(this).children ersetzen könnte. Welches auch immer für Sie am besten funktioniert.