JSFiddle - React, Tailwind, and code Playground

by cryptoquick

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.7/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{render "genres"}}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <h1>Songs ({{controller.filteredContent.length}})</h1>
    <ul>
        {{#each controller.filteredContent}}
            <li>{{title}} (genre: {{genre}})</li>
        {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="genres">
    <h1>Genres</h1>
    <ul>
        {{#each genre in genres}}
            <li><a {{action "toggle" genre}}>{{genre}}</a></li>
        {{/each}}
    </ul>
</script>

CSS

h1 {
    font-weight: bold;
    margin: 10px 0 10px 0;
}

a {
    color: #814e77;
    cursor: pointer;
    text-decoration: underline;
}
}

JavaScript

App = Ember.Application.create();

App.IndexRoute = Ember.Route.extend({
    setupController: function(controller) {
        controller.set('content', [
            Ember.Object.create({ title: 'Stairway to Heaven', genre: 'Metal' }),
            Ember.Object.create({ title: 'Ratts of the Capital', genre: 'Post Rock' }),
            Ember.Object.create({ title: 'Wonderwall', genre: 'Brit Pop' }),
            Ember.Object.create({ title: 'Last Flowers', genre: 'Indie Rock' })
        ]);
    }
});

App.IndexController = Ember.ArrayController.extend({
    content: [],
    excludeGenres: [],
    
    filteredContent: function() {
        var excludeTheseGenres = this.get('excludeGenres').mapProperty('genre');
        return this.get('content').filter(function(model) {
            return Boolean(jQuery.inArray(model.get('genre'), excludeTheseGenres) === -1);
        });
    }.property('excludeGenres.length', 'content.length')
});

App.GenresController = Ember.ObjectController.extend({
    needs: ['index'],
    
    genres: function() {
        return this.get('controllers.index').mapProperty('genre').uniq();        
    }.property('controllers.index.length'),
    
    toggle: function(genreName) {
        var indexController     = this.get('controllers.index'),
            genres              = indexController.get('excludeGenres'),
            genre               = indexController.findProperty('genre', genreName);
    
        if (genres.findProperty('genre', genreName)) {
            genres.removeObject(genre);
            return;
        }
                                                    
        genres.pushObject(genre);
    }
});