Polymer 0.5: reference an external <template> and use it for data binding

example.html

<!-- http://jsbin.com/rageqilava/1/edit?html,output -->

<script src="http://www.polymer-project.org/webcomponents.min.js"></script>
<script src="http://www.polymer-project.org/polymer.min.js"></script>
  
<link rel="import" href="templates.html" id="templates">

<polymer-element name="foo-bar">
  <template>

    <div id="container"></div>

    <template if="{{showDefault}}">
      default content template
    </template>

  </template>
  <script>
    Polymer({
      showDefault: true,
      attached: function() {
        var template = this.querySelector('template');
        if (template) {
          // Allow Polymer expressions in the template's {{}}.
          if (!template.bindingDelegate) {
            template.bindingDelegate = this.element.syntax;
          }

          var instance = template.createInstance({foo: 5});
          this.$.container.appendChild(instance);
          
          this.showDefault = false;
        }
      }
    });
  </script>
</polymer-element>

<foo-bar>
  <template ref="layout">
    <b>another</b> content template. Also supports data: {{foo}}
  </template>
</foo-bar>

templates.html

<!-- http://jsbin.com/pefuduhucu/1/quiet -->

<template id="layout">
   layout template from another file! data: {{foo}}
</template>

<script>
  // This import.
  var thisDoc = document._currentScript.ownerDocument;

  // <template> in this import.
  var layoutTemplate = thisDoc.querySelector('#layout');
  
  // Make a clone of the template.
  var clone = document.importNode(layoutTemplate, true);

  // Add it to the main document for others to use.
  document.body.appendChild(clone);
</script>