Question

所以我一直在尝试创建一个非常简单的聚合物版本，只是为了更多地了解Web组件和数据绑定。我发现这个小提琴显示了与HTML5模板http://jsfiddle.net/falafelsoftware/8fa8g的简单数据绑定（仅适用于支持的浏览器）

HTML：

<template>
   <ul>
     <li><a href="">Home</a></li>
   </ul>
</template>
<div id="result"></div>

JS：

var template = document.querySelector('template').content;
var shadow   = document.querySelector('#result').createShadowRoot();
var clone    = document.importNode(template, true);
shadow.appendChild(clone);

上面的代码会将无序列表输出到页面中，您可以在这个小提琴中看到http://jsfiddle.net/k40nbuq5/1/

但我真正想要的是能够拥有一个带有数据绑定的嵌套模板，所以我希望我的模板看起来像这样：

<template>
   <ul>
     <template repeat="{{items}}>
        <li><a href="">{{name}}</a></li>
     </template>
   </ul>
</template>
<div id="result"></div>

如果你查看第一个小提琴，它会应用一个名为＆＃34; model＆＃34;到模板，它似乎自动知道如何处理数据绑定。但是，我无法使用嵌套模板实现相同的效果。所以我尝试了以下但没有运气：

var template = document.querySelector('template');
var child    = template.querySelector('template');

child.model = [
   { name: 'Home' }
];

var shadow   = document.querySelector('#result').createShadowRoot();
var clone    = document.importNode(template.content, true);
shadow.appendChild(clone);

模型属性存在于嵌套模板上，但它不会对呈现内容执行任何操作。我尝试了其他一些方法，但到目前为止都没有成功。

非常感谢任何帮助，提前致谢。

带有数据绑定的嵌套HTML5模板

0 个答案: