Polymer custom element with template content

In the code below, the content "Foo" of the # template string is always empty when I try to access it programmatically or when I validate the DOM in Chrome. Can someone explain why?

In general, how do you provide the template defined in the outer element to the inner element so that the inner element can access the content and conditionally clone or import that content?

I am using polymer 0.4.2.

<polymer-element name="x-inner" noscript>
    <!--
        How can I access the content "Foo" of <template>Foo</template>,
        So that I can import/clone it here?

        Using <content> moves the template from x-outer to x-inner,
        but the template .content property is empty, instead of 'Foo' as I expected.
     -->
    <content></content>
</polymer-element>

<polymer-element name="x-outer" noscript>
    <template>
        <x-inner>
            <!--
                How can I pass a template to a custom element?
                I don't want the contents of this template to be rendered
                here in x-outer, but instead conditionally rendered by x-inner
             -->
            <template id="bar">Foo</template>
        </x-inner>
    </template>
</polymer-element>

<x-outer></x-outer>

      

+3


source to share


1 answer


This question is potentially tricky, you can get started below.

(This is the third update to this answer, confirming the bit above "hard" = P).

Polymer includes a library TemplateBinding.js

.

The library TemplateBinding.js

provides <template>

many features including data binding to models, conditional embossing, and replication / iteration through arrays. It also adds a feature where cloned nested templates do not replicate their own content, preventing a possible explosion of useless nodes during iteration. Instead, it TemplateBinding.js

creates links in cloned-nested templates to the original content templates. The upshot is that if you do TemplateBinding.js

, you should use the template.createInstance()

API for the best results.

Now when using raw templates without, TemplateBinding.js

you can stamp the template simply by using var nodes = document.importNode(template.content, true)

. Of course, in this case, you will not get the nested template replication optimization (which may not be important).



Note:

  • I removed <content>

    node from <x-inner>

     template because it is not practical. The code below dumps the template directly from the lightboard and places the instance in the shadow of the root.
  • Declare x-inner

    before x-outer

    , because the latter depends on the former.

Sample code:

<x-outer></x-outer>

<polymer-element name="x-inner">
<template>
</template>
<script>

  Polymer({
    domReady: function() {
      this.renderTemplate();
    },
    renderTemplate: function() {

      // note: this only works if `template` is a true child of `this`
      // (as opposed to projected) 
      var template = this.querySelector('template');

      // use createInstance from TemplateBinding.js library API
      this.shadowRoot.appendChild(template.createInstance());

      /* 
      // this would work for raw templates, but Polymer includes TemplateBinding.js
      this.shadowRoot.appendChild(stampTemplate(template));
      */

      /* 
      // if you don't know whether TemplateBinding.js exists or not,
      // you could do something like this (see stampTemplate definition below)
      this.shadowRoot.appendChild(stampTemplate(template));
      */

      /*
      // this way uses the binding feature of TemplateBinding.js
      template.setAttribute('bind', '');
      template.model = { /* some data */ };
      */
    }
  });

  // use best available API
  function stampTemplate(template) {
    if (template.createInstance) {
      return template.createInstance();
    } else {
      return document.importNode(template.content, true);
    }
  }

</script>
</polymer-element>

<polymer-element name="x-outer" noscript>
<template>

  <x-inner>
    <template id="bar">Foo</template>
  </x-inner>

</template>
</polymer-element>

      

http://jsbin.com/nemaha/14/edit

+1


source







All Articles