使用模板绑定创建影子 DOM

Question

上下文。

我正在尝试仅使用 webcomponents.js 中的平台设施而不是聚合物层 (polymer.js) 中的平台设施来创建 Web 组件。典型的例子很简单并且工作正常：

<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}} 语法的属性或节点，并将它们弄乱。