JSFiddle - React, Tailwind, and code Playground

by fguillen

HTML

<script src="https://raw.github.com/documentcloud/underscore/ba3e31b53ef5752b40cfb2d71f594536fefbe916/underscore-min.js"></script>
<script src="https://raw.github.com/documentcloud/backbone/master/backbone-min.js"></script>
<div id="hard-wrapper" class="wrapper"></div>
<div id="soft-wrapper" class="wrapper"></div>

CSS

body { font-family: Arial; }
.wrapper {
    padding: 10px;
    background: #ccc;
    margin-bottom: 10px;
}
h1 {
    font-weight: bold;
}

JavaScript

data = [
    {
      id: "modelOne",
      color: "red",
      age: 10,
      size: "large"
    },
    
    {
      id: "modelTwo",
      color: "red",
      age: 11,
      size: "medium"
    },
    
    {
      id: "modelThree",
      color: "red",
      age: 9,
      size: "large"
    }
]

var Model = 
    Backbone.Model.extend({
        compare: function( model ){
            console.log( "model.attributes", model.attributes );
            result = 
                _.select(
                    model.attributes, 
                    function(value, key){ 
                        console.log( "attribute", key, value, this.get( key ) );
                        return this.get( key ) == value;
                    },
                    this
                );
            console.log( "result: ", result );
            return result;
        }        
    });

var Models = 
    Backbone.Collection.extend({
        model: Model,
        
        matchs: function(){
            var tmpModel = this.at(0);
            this.each( 
                function(model){ 
                    model.compare( tmpModel ) 
                } 
            );
        }
    });



var myModels = new Models(data);

console.log( "result:", myModels.matchs() );