Question

我尝试在自定义元素（请参阅下面的自定义元素示例）呈现之前创建启动画面。

当我直接使用我的自定义元素时，一切正常：

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

推出＆＃34; foo（foo = bar）＆＃34;。

的特殊布局

但当我将自定义控件包装在模板中时，is =＆＃34;自动绑定＆＃34;然后出现了一些问题：我希望使用自定义控件中提供的模板，而忽略它（输出应为＆＃34; foo（foo = bar）的特殊布局＆＃34;而不是＆＃34;默认foo的布局（foo = bar）＆＃34;）

＆＃13;

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

＆＃13;

<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>

＆＃13;

参见JSBin：http://jsbin.com/poquge/1/edit?html,js,output

这里有什么想法吗？

Answer 1

您不需要在主页中使用<template>元素从Polymer元素ref=执行任何操作。您应该能够使用Polymer元素中的<content>插入点完成您想要的任务。

如果您在<content>中指定了一些子/文本内容，则默认情况下会使用该内容。要覆盖默认值，请在页面上包含Polymer元素时提供一些子/文本内容。

（我认为你的问题与在初始化值之前显示加载消息有关的方面与你的问题没有直接关系，但无论如何我都把它留了。）

<!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>

覆盖Polymer模板中的默认<content>？</content>

1 个答案: