Question

上下文

我正在尝试使用webcomponents.js中的平台工具创建Web组件，而不是使用聚合物层（polymer.js）中的平台工具。典型的例子很简单，工作正常：

<div id="wc-1">
    <span id="text">View</span>
</div>
<template id="template">
  <div>
    <h2> <content select="#text"> Default </content> 1 </h2>
  </div>
</template>
<script>
  document.addEventListener('DOMContentLoaded', function () {
     function createWC (host) {
       var host  = document.querySelector (host);
       var template = document.querySelector ('#template'); 
       var root = host.createShadowRoot ();
       root.appendChild (template.content.cloneNode (true));  
     }     
     var wc = createWC ('#wc-1');
  });

</script>

问题。

使用template bindings和典型的激活脚本（1）扩展上面的示例，可以获得一些不希望的结果。下一个代码导致模板内容的两个副本，一个归因于激活代码，另一个归因于Shadow DOM内未解析的数据绑定。如何激活模板并将其内容包含在shadow DOM中？

<div id="wc-1">
    <span id="text">View</span>
</div>
<template id="template" bind="{{data}}">
    <div class="red">
        <h2> <content select="#text"> Default </content> 1 </h2>
        Created @{{now}}
    </div>
</template>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    function createWC (host) {
      var host  = document.querySelector (host);
      var template = document.querySelector ('#template'); 
      var root = host.createShadowRoot ();
      template.model = { // (1)
        data : {
           now : new Date()
        }
      };
      root.appendChild (template.content.cloneNode (true));
    }
    var wc = createWC ('#wc-1');
  });
</script>

问题。

我想我在激活部分有错误。有人可以帮我解决这个问题吗？提前致谢。代码可以在http://jsbin.com/tiniyu/5/edit

找到

Answer 1

您要链接到旧版platform.js（0.3.4）。看起来在platform.js（0.4.2）的最新版本中，模板绑定已被删除（对于webcomponents.js v0.4.2也应该如此）。

以下是使用聚合物网站的平台主分支的示例：http://jsbin.com/pejoga/2/edit

Answer 2

{{x}}语法不是<template>规范的一部分，而是Polymer库的一部分。如果您尝试不使用Polymer，那么它将不适合您。

本身，template does very little。 Polymer添加了查找<template>元素的代码，查找包含{{x}}语法的属性或节点，并与它们混淆。

使用模板绑定创建shadow DOM

2 个答案: