Polymer JS 中的嵌套模板

Question

我有一个这样的 Polymer 代码

<template>
    <template repeat="{{item in tasklist}}">
        <paper-checkbox <template if={{item.isDone}}>checked</template> label="{{item.itemName}}"></paper-checkbox>
    </template>
</template>

我想做的是基于变量isDone，它的值为布尔值，我想在paper-checkbox.

中添加checked属性

我不确定这样做是否正确。

我使用的JSON对象如下：

tasklist: [
    {
        itemName : "Study",
        isDone : true
    },
    {
        itemName : "Cook Dinner",
        isDone : false
    }
]

谁能告诉我正确的方法吗？

提前致谢。

Answer 1

首先，HTML必须仍然有效。您不能简单地将标签放入其他标签中。幸运的是，在这种情况下您不需要使用条件模板，下面的代码可以解决问题：

<paper-checkbox role="checkbox" checked="{{ item.isDone }}">
</paper-checkbox>

如果你还想使用条件模板，你可以这样写：

<template if="{{ item.isDone }}">
    <paper-checkbox role="checkbox" checked>
    </paper-checkbox>
</template>
<template if="{{ !item.isDone }}">
    <paper-checkbox role="checkbox">
    </paper-checkbox>
</template>

实时预览：http://plnkr.co/edit/V9ZukBq4ia2pqBk55DqH?p=preview

希望对您有所帮助。

Polymer JS 中的嵌套模板

Nested Templates in Polymer JS

templates

web-component

polymer