JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.3/backbone.marionette.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<div class="js-ctn"></div>

<script type="text/html" class="js-tmpl">
    <form action="">
        <% _.each(unique, function(person) { %>
            <% console.log(person) %>
            <input type="radio"><%= person.name %>
        <% }) %>
    </form>
</script>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500);

body {
    font-family: Roboto;
    color: #191919;
}

a {
    color: #191919;
}

JavaScript

console.clear();

var exclude = [
        {
            id: 1,
            name: 'John'
        }
 ];


var peopleArr = [
        {
            id: 1,
            name: 'John'
        },
        {
            id: 2,
            name: 'James'
        },
        {
            id: 3,
            name: 'Simon'
        }
    ];




var PersonModel = Backbone.Model.extend();
var PeopleCollection = Backbone.Collection.extend({
    model: PersonModel
});


var PersonsItemView = Mn.ItemView.extend({
    template: '.js-tmpl',
    
    templateHelpers: function() {
        return {
            unique: this.options.unique
        }
    },
    
    initialize: function() {
        console.log(this.options.unique);
        //console.log(this.options.unique.toJSON());
    }
});


var peopleCollection = new PeopleCollection(peopleArr);

var uniqueList = peopleCollection.filter(function(person) {
    include = true;
	exclude.forEach(function(exl) {
        if (JSON.stringify(exl) == JSON.stringify(person)) {
            include = false;
            return;
        }
    })
    if (include) return person;
});

var test = new PeopleCollection(uniqueList);

var personsView = new PersonsItemView({
   unique: test
});


var region = new Backbone.Marionette.Region({ 
    el: '.js-ctn'
});

region.show(personsView);