Geek Answers Handbook

Polymer 1.0 - an alternative to injectBoundHTML ()

What is a polymer equivalent to injection of BoundHTML ()?

(i.e., adding HTML strings to nodes in a Polymer element and defining data bindings)

JSbin example - http://jsbin.com/jufase/edit?html,output

EDIT: not enough SO to accept my own answer, but it should be down below, somewhere down. TL; DR - use dom-bind patterns

+8
polymer
source share
4 answers

Although, as a technical expert said, he is still not very well supported. This seems to do the trick.

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)); }

If your HTML has already been parsed, use something like "doc.importNode (sourceNode, true)"; instead of getting / setting innerHTML.

+4
source share

It seems this feature is not yet supported, looking at comments from @kevinpschaaf: https://github.com/Polymer/polymer/issues/1778

Using dom-bind, I should be able to satisfy my use case, for example. http://jsbin.com/caxelo/edit?html,output

+2
source share

Bindings refer to default properties, and hyphens can be used to indicate capitalization:

<element inner-html="{{prop}}"></element>

0
source share

Thank you guys for the prototype that I updated for my own needs: Create markup in the polymer because dom-repeat could not perform this operation.

Tags for search engines: Dynamic Dynamic Layout Dynamic Layout Polymer Generation dom-repeat dom repeat dynamic dynamic dynamism

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>
0
source share

More articles:


All Articles