Backbone.Model exemple

Démonstration d'une écoute sur l'évènement 'change' d'un modèle Backbone. http://www.atinux.fr

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<div id="container">
    <div id="content">
        <div id="paper"></div>
        <div id="thumb"></div>
        <div id="name">
            <input type="text" class="input" name="name" placeholder="Nom prénom">
        </div>
        <div id="phone">
            <input type="text" class="input" name="phone" placeholder="Téléphone">
        </div>
        <a class="Button">Vérifier</a>
        <div id="from"><p>Design from <a href="http://benbate.com/" target="_blanck">Benbate</a></p></div>
    </div><!-- END CONTENT -->
</div>

<img class="hidden" src="http://www.atinux.fr/demos/demo-model/thumb-bad.png"/>
<img class="hidden" src="http://www.atinux.fr/demos/demo-model/thumb-good.png"/>

CSS

body {
    background-image: url(http://www.atinux.fr/demos/demo-model/bg.png);
}
    
#container {
    margin: 20px auto;
    width: 276px;
    height: 277px;
}

#thumb {
    width: 69px;
    height: 74px;
    margin: -250px auto;
    z-index:1;
    background-image: url(http://www.atinux.fr/demos/demo-model/thumb.png);
}
#thumb.bad {
    background-image: url(http://www.atinux.fr/demos/demo-model/thumb-bad.png);
}
#thumb.good {
    background-image: url(http://www.atinux.fr/demos/demo-model/thumb-good.png);
}

#paper {
    width: 276px;
    height: 277px;
    background-image: url(http://www.atinux.fr/demos/demo-model/paper.png); 
    }
    
#name {
    width: 188px;
    height: 43px;
    background-image:url(http://www.atinux.fr/demos/demo-model/input.png);
    position: relative;
    left: 42px;
    top: 255px;
    z-index:2;
    }
    
#phone {
    width: 188px;
    height: 43px;
    background-image:url(http://www.atinux.fr/demos/demo-model/input.png);
    position: relative;
    left: 42px;
    top: 255px;
    z-index:3;
    }
 
.input {
    border:0px; 
    background-color:transparent; 
    padding: 3px 0 0 15px;
    width:178px;
    height:38px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:11px;
    color: #bbb;
    outline: none;
}


.Button {
    position: relative;
    left: 105px;
    top: 263px;
    z-index:2;
    display: inline-block;
    border: 1px solid #cdcdcd;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 12px Helvetica Neue;
    font-weight: normal;
    padding: 8px 13px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    text-shadow:0px 1px 0px #ffffff;
    -moz-box-shadow: 0px 1px 0px 0px #acacac;
    -webkit-box-shadow: 0px 1px 0px 0px #acacac;
    box-shadow: 0px 1px 0px 0px #acacac;
    color: #a3a3a3;
    background: #f4f4f4;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#ebebeb));
    background-image:...

JavaScript

// Je créé mon type de modèle
var MonModel = Backbone.Model.extend({
    initialize: function () {
        // J'écoute sur l'évènement 'error' au cas où si la validation a échoué            
        this.on('invalid', function (model, err) {
            // Je déclenche une alerte
            alert(err);
            $('#thumb').removeClass('good').addClass('bad');
        });
        // J'écoute aussi sur l'évènement change pour savoir si ça c'est bien passé
        this.on('change', function (model) {
            $('#thumb').removeClass('bad').addClass('good');
        });
    },
    validate: function (attrs) {
        if (!/^[A-z]{2,} [A-z]{2,}$/.test(attrs.name)) return 'Nom prénom invalide';
        if (attrs.phone.length !== 10) return 'Numéro de téléphone invalide (10 numéros).';
        if (!/^\d{10}$/.test(attrs.phone)) return 'Numéro de téléphone invalide (chiffres).';
    }
});

// Je créé mon modèle
var model = new MonModel();

// Je bind le boutton vérifier
$('.Button').click(function () {
    var name = $('#name input').val(),
        phone = $('#phone input').val();
    model.set({
        name: name,
        phone: phone
    }, { validate: true });            
});