Not able to get the correct HTML output

[patrick-steele-idem]

I'm trying really hard to include Plates in a guide that demonstrates logic-less templates, but I am not able to get the output that I am hoping for.

Basically, given a template similar to the following:

<ul class="colors">
    <li class="color">
        [COLOR]
    </li>
</ul>

<div class="noColors">
    No colors!
</div>

I'm trying to produce the following output for the given input data:

Input Data:

{
    "colors": ["red", "green", "blue"]
}

Target Output:

<ul class="colors">
    <li class="color">red</li>
    <li class="color">green</li>
    <li class="color">blue</li>
</ul>

Alternatively, with no colors:

Input Data:

{
    "colors": []
}

Target Output:

<div>
    No colors!
</div>

I've tried lots of different map configurations I'm starting to think it is impossible to get the target output with Plates... Any help is greatly appreciated.