JSFiddle - React, Tailwind, and code Playground

by jashwant

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<!--
COMMENTS:

1. I am keeping the validation logic on models, as its provided out of the box by the backbone; instead of extending .add() of collection.

2. I dropped the SmartDial Model, as it was not fitting in models category.
Now, all models are alike and can be added to SmartKeyList collection.

3. The logic to test duplicate key  is being kept at Collection level as it fits there. We need to avoid duplicacy in hot_key of models in collection. and collection tracks down of each of its model.
 
4. You cannot (also should not) add an invalid model.
Earlier this was by default https://github.com/documentcloud/backbone/pull/1717
but now I am restricing by checking the 'validationError' attribute.

5. You can see whats going on by watching console.
I am adding 4 keys to collection but only 2 are being added, key2 raises an validation error of duplicate key and key4 of range error.

-->

JavaScript

(function($) {   
        SmartKey = Backbone.Model.extend({
            defaults:{
                hot_key:0,
                number:'888-888-8888',
                desc:'My Number'
            },
            validate: function(sKey){  
              if(sKey.hot_key > 9 || sKey < 0){
                return 'hot_key must be between 0 and 9';  
              };
              if(smartkeylist.isDupeKey(sKey.hot_key)) {
                return 'hot_key must be unique';
              }
            }

            
        });

        SmartKeyList = Backbone.Collection.extend({
          Model: SmartKey,
          isDupeKey : function (hot_key) {   
            var isDupe = this.some(function(model) { 
              return (hot_key === model.get('hot_key'));
            }); 
            return isDupe; 
          }
        });

        smartkeylist = new SmartKeyList();

        // smartkeylist.on("add", function(key) {
        //   console.log('Number ' + key.get("number") + ' added with hotkey ' + key.get('hot_key'));
        // });
      

        var key = new SmartKey({
          hot_key:0, 
          number:'888-888-8888', 
          desc:'Test'
        },{validate:true});   // Validation fire on .set method only when validate: true
     
        if(key.validationError) {         // Gives validationError message
          console.log('Error in key1: ',key.validationError);
        }
        else {
          smartkeylist.add(key);
        } 
 
         // trying to set invalid model 
         key.set({desc : 'test2',hot_key:0},{validate:true});
         
         if(key.validationError) {         // Gives validationError message
          console.log('Error in key1: ',key.validationError);
        }
        else {
          smartkeylist.add(key);
        }   
         console.log(smartkeylist.models[0].toJSON());
      })(jQuery);