Polymer 1.0 - injectBoundHTML() alternative

Asked 15/6, 2015 at 1:51 Answered 31/8, 2016 at 8:39

What's the Polymer 1.0 equivalent to injectBoundHTML()?

(i.e. appending HTML strings to nodes within a Polymer element and having data bindings resolve)

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

EDIT: don't have enough SO cred to accept my own answer yet, but it should be down below somewhere. TL;DR - use "dom-bind" templates

Geometrician answered 15/6, 2015 at 1:51 Comment(0)

Although as techknowledgey pointed out it's not really supported well yet. The following 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 was already parsed then use something like "doc.importNode(sourceNode, true);" instead of getting/setting innerHTML.

Shoeshine answered 9/7, 2015 at 14:24 Comment(0)

Looks like this is not really a supported feature yet, looking at the comments from @kevinpschaaf: https://github.com/Polymer/polymer/issues/1778

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

Geometrician answered 15/6, 2015 at 23:31 Comment(0)

Bindings are to properties by default, and hyphens can be used to denote capitalizations:

<element inner-h-t-m-l="{{prop}}"></element>

Unwatched answered 15/6, 2015 at 3:1 Comment(1)

While this does bind "prop", it still renders the output as a literal string, and any bindings within the html are not resolved. jsbin.com/woxato/edit?html,output – Geometrician 15/6, 2015 at 15:45

Thanks guys for the prototype that I updated for my own needs : Generate markup in polymer, as dom-repeat was unable to perform this operation.

Tags for search engines : Polymer Generation dynamically dynamic markup custom element dom-repeat dom repeat 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>

Antarctica answered 31/8, 2016 at 8:39 Comment(0)

Recommended topics

Hot tags