CODEWITHSUNDEEP
polymer
lgersman
lgersman

Reputation: 2286

Overriding default <content> in a Polymer template?

i try to create a splash screen before my custom element (see custom element example below) gets rendered.

when i use my custom element directly, everything works fine :

<!-- works as expected -->
<foo-view foo="bar">
  <template id="layout">
    special layout for foo(foo={{foo}})
  </template>
</foo-view>

puts out "special layout for foo(foo=bar)".

but when i wrap the custom control in an template with is="auto-binding" then something went completely wrong : I expect the template provided within the custom control to be used but instead its ignored (output should be "special layout for foo(foo=bar)" instead of "default layout for foo(foo=bar)")

document.addEventListener('polymer-ready',function() {
    // simulate something time consuming ...
  setTimeout(function() {
        // ... after all apply the data to the template
    var template = document.querySelector('#container');
    template.foo = "bar";
  }, 1000)  
});
<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>

  <!-- the custom control -->      
<polymer-element name="foo-view" noscript>
  <template>
    <content></content>
    <template bind ref="layout">
      default layout for foo(foo={{foo}})
    </template>
  </template>
</polymer-element>

  <!-- the template wrapping my custom control creation -->      
<template id="container" is="auto-binding" >
  <template if="{{!foo}}">
    <div>Loading ...</div>
  </template>
  <br>
  <template if="{{foo}}">
    <foo-view foo="{{foo}}">
      <template id="layout">
        special layout for foo(foo={{foo}})
      </template>
    </foo-view>
  </template>
</template>

See JSBin : http://jsbin.com/poquge/1/edit?html,js,output

Any ideas whats wrong here ?

Upvotes: 0

Views: 505

Answers (1)

Jeff Posnick
Jeff Posnick

Reputation: 56044

You don't need to do anything with <template> elements in your main page that you ref= from your Polymer element. You should be able to accomplish what you want with the <content> insertion point in your Polymer element.

If you specify some children/text content in the <content>, then that will be used by default. To override the default, provide some children/text content when you include your Polymer element on a page.

(I think the aspect of your question that has to do with displaying a loading message before a value is initialized isn't directly related to your problem, but I've left that in anyway.)

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer Demo</title>
  </head>
  <body>
    <script src="//www.polymer-project.org/platform.js"></script>
    <script src="//www.polymer-project.org/polymer.js"></script>

    <polymer-element name="foo-view" noscript attributes="foo">
      <template>
        <div>
          <content>
            default layout for foo(foo={{foo}})
          </content>
        </div>
      </template>
    </polymer-element>

    <template id="container" is="auto-binding" >
      <template if="{{!foo}}">
        <div>Loading ... (takes 1 second)</div>
      </template>

      <template if="{{foo}}">
        <foo-view foo="{{foo}}">
          special layout for foo(foo={{foo}})
        </foo-view>
        
        <!-- Just to illustrate that the default <content> is used when there's a <foo-view> with no children. -->
        <foo-view foo="prima"></foo-view>
      </template>
    </template>

    <script>
      document.addEventListener('polymer-ready', function() {
        setTimeout(function() {
          var template = document.querySelector('#container');
          template.foo = "bar";
        }, 1000);
      });
    </script>
  </body>
</html>

Upvotes: 1

Related Questions