是否可以使用HTML 5 <template>标记而不重复&#39;重复&#39;属性</模板>

时间:2014-08-28 12:54:34

标签: javascript html web-component

我见过使用带有template属性的HTML 5 repeat标记来执行双向数据绑定的示例(类似于AngularJS):

<template repeat="{{items}}">
    <a href="{{link}}">
        <img src="{{image}}" />
    </a>
</template>

使用关联的JavaScript模型:

template.model = {
    items: [ {
        link: '...'
        image: '...'
    } ]

在这里小提琴:http://jsfiddle.net/falafelsoftware/8fa8g

似乎repeat应该是此行为的要求,但是一旦我将其删除:

<template>
    <a href="{{link}}">
        <img src="{{image}}" />
    </a>
</template>

并相应调整模型:

template.model = {
    link: '...'
    image: '...'

我无法渲染任何内容:http://jsfiddle.net/8fa8g/9/

可以在没有template的情况下使用repeat吗?

1 个答案:

答案 0 :(得分:0)

正确答案(正如我在CletusW链接后发现的那样)似乎是bind属性:

<template bind="{{item}}">
    <a href="{{link}}">
        <img src="{{image}}" />
    </a>
</template>

这仍然需要模型中令人讨厌的间接级别:

template.model = {
    item: {
        link: '...'
        image: '...'
    }

但似乎可以在FF和Chrome中使用。

然而,正如CletusW进一步指出的那样,目前尚不清楚这个定义的规范是什么?