JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>

JavaScript

var Box = Backbone.Model.extend({
    defaults: {
        x: 0,
        y: 0,
        w: 1,
        h: 1,
        color: "black",
    }

});

var Boxes = Backbone.Collection.extend({
    model: Box
});

var boxes = new Boxes;

boxes.add(new Box({
    color: "green",
    x: "10",
    y: "20"
}));
boxes.add(new Box({
    color: "red",
    x: "10",
    y: "20"
}));
boxes.add(new Box({
    color: "blue",
    x: "10",
    y: "20"
}));
boxes.add(new Box({
    color: "red",
    x: "10",
    y: "20"
}));
boxes.add(new Box({
    color: "blue",
    x: "10",
    y: "20"
}));
boxes.add(new Box({
    color: "green",
    x: "10",
    y: "20"
}));
boxes.add(new Box({
    color: "red",
    x: "10",
    y: "20"
}));

var sorted = boxes.groupBy(function(box) {
    return box.get("color");
});


var red_boxes = _.first(_.values(_.pick(sorted, "red")));

var red_collection = new Boxes;
red_boxes.each(function(box) {
    red_collection.add(box);

});

console.log(red_collection);