Was ist das Polymer 1.0 entspricht injectBoundHTML()?Polymer 1.0 - injectBoundHTML() Alternative
(dh Anhängen von HTML-Strings zu Knoten innerhalb eines Polymerelement und Datenbindungen mit Entschlossenheit)
A JSbin Beispiel - http://jsbin.com/jufase/edit?html,output
EDIT: nicht genug SO cred noch meine eigene Antwort zu akzeptieren, aber es sollte irgendwo unten sein. TL; DR - verwenden „dom-bind“ Vorlagen
Bindungen sind Eigenschaften standardmäßig und Bindestriche verwendet werden können Aktivierungen bezeichnen:
<element inner-h-t-m-l="{{prop}}"></element>
Sieht aus wie dies noch nicht wirklich eine unterstützte Funktion ist , Blick auf die Kommentare von @kevinpschaaf: https://github.com/Polymer/polymer/issues/1778
Mit dom-bind sollte ich in der Lage sein, meinen Anwendungsfall, z http://jsbin.com/caxelo/edit?html,output
Obwohl wie techknowledgey darauf hingewiesen, es ist noch nicht wirklich gut unterstützt. Das Folgende scheint den Trick zu machen.
function injectBoundHTML(html, element) {
var template = document.createElement('template', 'dom-bind');
var doc = template.content.ownerDocument;
var div = doc.createElement('div');
div.innerHTML = html;
template.content.appendChild(div);
while (element.firstChild) {
element.removeChild(element.firstChild);
}
element.appendChild(Polymer.Base.instanceTemplate(template));
}
Wenn Ihr HTML bereits analysiert wurde dann etwas wie "doc.importNode (SourceNode, true);" anstatt innerHTML zu bekommen/setzen.
Danke Jungs für den Prototyp, den ich für meine eigenen Bedürfnisse aktualisiert: Generieren Markup in Polymer, wie Dom-Repeat nicht in der Lage, diese Operation durchzuführen.
Stichworte für Suchmaschinen: Polymer-Generation dynamisch dynamische Markup benutzerdefinierte Element dom-repeat dom wiederholen balise dynamique dynamiquement
http://jsbin.com/wiziyeteco/edit?html,output
<!doctype html>
<html>
<head>
<title>polymer</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<link rel="import" href="http://polygit.org/components/paper-button/paper-button.html">
</head>
<body>
<dom-module id="x-test">
<template>
<div id="container"></div>
</template>
</dom-module>
<script>
Polymer({
is: 'x-test',
ready: function() {
// Declare custom elements
var customElements = [
{name:'paper-button', title:'A'},
{name:'paper-button', title:'B'},
{name:'paper-button', title:'C'},
{name:'paper-button', title:'D'},
];
// Declare auto-binding, as we are at the root HTML document
var domBind = document.createElement('template', 'dom-bind');
domBind.customElements = customElements;
var domBindDocument = domBind.content.ownerDocument;
// Declare custom elements
for (var i in domBind.customElements) {
var item = domBind.customElements[i];
var elem = domBindDocument.createElement(item.name);
elem.setAttribute('raised', 1);
elem.innerHTML = item.title;
domBind.content.appendChild(elem);
}
// Append to #container
this.$.container.appendChild(domBind);
}
});
</script>
<x-test></x-test>
</body>
</html>
Während dies nicht bindet "Stütze", macht es immer noch die Ausgabe als eine literale Zeichenfolge, und alle Bindungen innerhalb des HTML sind nicht aufgelöst. http://jsbin.com/woxato/edit?html,output – techknowledgey