Backbone.Collection exemple

Démonstration d'une liste d'amis avec Backbone.Collection. http://www.atinux.fr

by Atinux

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://bootswatch.com/slate/bootstrap.min.css">
<div class="well">
    <h2>Ma liste d'amis</h2>
    <form class="form-inline addFriend">
        <b>Ajouter un ami : </b> &nbsp;
        <input type="text" name="firstname" class="inputFirstName" placeholder="Prénom" /> &nbsp;
        <input type="text" name="lastname" class="inputLastName" placeholder="Nom" /> &nbsp;
        <button type="submit" class="btn btn-info">ajouter</button>
    </form>
    <table class="table table-striped friendList"></table>
</div>

CSS

.well {
    width: 450px;
    margin: auto;
    margin-top: 20px;
}
form {
    padding: 10px;
    background-color: rgba(255,255,255, 0.1);
    margin-top: 10px;
}
th.remove {
    width: 90px;
}
a {
    cursor: pointer;
}
.inputFirstName, .inputLastName {
    width: 100px;
}

JavaScript

// On créé un nouveau type de collection en étendant Backbone.Collection
var Friends = Backbone.Collection.extend({
    initialize: function () {
        // On écoute sur les évènements add et remove de la collection
        this.on('add', this.refreshList);
        this.on('remove', this.refreshList);
    },
    refreshList: function () {
        // On remet à 0 la liste
        this.resetList();
        // Pour chaque ami...
        this.each(function (friend) {
            // On ajoute une ligne dans le tableau
            $('.friendList').append('<tr>\
                                    <td>'+friend.get('firstname')+'</td>\
                                    <td>'+friend.get('lastname')+'</td>\
                                    <td><a cid="'+friend.cid+'" class="btn removeFriend">supprimer</a></td>\
                </tr>');
        });
    },
    resetList: function () {
        if (this.length) {
            // Si il a au moins un ami, on prépare la première ligne du tableau
            $('.friendList').html('<tr><th>Prénom</th><th>Nom</th><th class="remove"></th></tr>');
        }
        else {
            // Sinon on affiche un message
            $('.friendList').html('<tr><th>Vous n\'avez aucun amis dans votre liste.</th></tr>');
        }
    }
});

// On créé la liste d'amis avec 2 entrées pour éviter que ce soit vite
var friends = new Friends([
    { firstname: 'Alex', lastname: 'Térieur' },
    { firstname: 'Alain', lastname: 'Térieur' }
]);

// On affiche la liste d'amis
friends.refreshList();

// -- ÉVÈNEMENTS -- //

// On écoute sur les évènements du formulaire pour ajouter un ami
$('.addFriend').submit(function () {
    // On récupère les valeur des champs
    var firstname = $('.inputFirstName').val(),
        lastname = $('.inputLastName').val();
    // On l'ajoute à la collection
    friends.add({
        firstname: firstname,
        lastname: lastname            
    });
    // On vide les champs
    $('.inputFirstName').val('');
   ...