CODEWITHSUNDEEP
templatespolymerweb-component
Shhhhh
Shhhhh

Reputation: 198

Nested Templates in Polymer JS

I have a Polymer code which goes this way 

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

What I am trying to do is based on the variable isDone whose value is boolean, I want to add checked attribute in paper-checkbox.

I am not sure if that is the correct way to do it.

The JSON object that I am using is as follows: 

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

Can anyone give me the correct way to do it?

Thanks in advance.

Upvotes: 0

Views: 181

Answers (1)

Aleksei Matiushkin
Aleksei Matiushkin

Reputation: 120990

First of all, the HTML must be still valid. You can’t simply drop tags inside other tags. Fortunately, in this case you don’t need to use conditional templates and the following code does the trick:

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

Whether you still want to use conditional template, you might write:

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

Live preview: http://plnkr.co/edit/V9ZukBq4ia2pqBk55DqH?p=preview

Hope it helps.

Upvotes: 1

Related Questions