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="//backbonejs.org/backbone-min.js"></script>
<script src="//underscorejs.org/underscore-min.js"></script>
<div id="age"></div>
<button class="plusUn">Joyeux anniversaire !</button>

CSS

#age {
    padding: 5px 0;
    margin-bottom: 5px;
    background-color: rgb(240,240,240);
    border: 1px rgb(200,200,200) solid;
    border-radius: 5px;
    list-style-type:none;
    text-align: center;
    width: 200px;
}
.plusUn {
    width: 200px;
    padding: 5px 0;
}

JavaScript

// Je créé un modèle Backbone
var model = new Backbone.Model();
// J'écoute sur les changements de ce modèle
// À chaque fois que le modèle change, je raffraichie la <div>
model.on('change', function () {
    var age = model.get('age');
    $('#age').html(age + ' ans');
});
// J'ajoute un an à chaque fois qu'on clique sur "Joyeux anniversaire !"
$('button.plusUn').click(function () {
    var age = model.get('age');
    model.set({
        age: age + 1
    });
});
// Je lui définie comme age par défault 19 ans
model.set({ age: 19 });