JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//canjs.com/release/2.0.4/can.jquery.js"></script>
<div id="out"></div>
<script type="text/mustache" id="listMustache">
{{#items}}
  <div {{#selected}}class='selected'{{/selected}}
       can-click='toggle'>
    {{title}}
  </div>
{{/items}}
</script>

CSS

body {
    color: red;
}

.selected {
    color: green;
}

JavaScript

can.Component.extend({
    tag: "my-items",
    scope: {
      selected: [],
      toggle: function(item){
        var selected = this.attr('selected1'),
          index = selected.indexOf(item);
          
        if( index >= 0 ) {
          selected.splice(index, 1);
        } else {
          selected.push(item);
        }
      }
    },
    template: can.view("listMustache"),
    helpers: {
      selected1: function(options){
        if( this.attr("selected").indexOf(options.context) >=0 ) {
          return options.fn();
        } else {
          return options.inverse();
        }  
      }
    }
  })

  $("#out").html(can.view.mustache("<my-items/>")({
    items: new can.List([
      { title: "CanJS" },
      { title: "jQuery++" },
      { title: "FuncUnit" },
      { title: "DocumentJS" },
      { title: "JavaScriptMVC" }
    ])
  }))