jQuery 2 Backbone

TP pour Club Code

by espeon

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<div id="new-status">
     <h2>New monolog</h2>

    <form action="#" method="post">
        <textarea></textarea>
        <br />
        <input type="submit" value="Post" />
    </form>
</div>
<div id="statuses">
     <h2>Monologs</h2>

    <ul></ul>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    background-color: #fff;
}
h2 {
    margin: 0;
    padding: 0 0 5px 0;
}
input {
    background-color: #ddd;
    border: 0;
}
input:active {
    background-color: #bbb;
}
#new-status {
    margin: 20px;
    padding: 20px;
    background-color: #67A9C3;
}
#statuses {
    margin: 20px;
    padding: 20px;
    background-color: #92B456;
}

JavaScript

function enregistrer() {
        $.ajax({
            url: '/echo/json/',
            type: 'POST',
            dataType: 'json',
            data: {
                json: $.toJSON({
                    text: $('#new-status').find('textarea').val()
                })
            },
            success: function (data) {
                $('#statuses').append('<li>' + data.text + '</li>');
                $('#new-status').find('textarea').val('');
            }
        });
}

$(document).ready(function () {
    $('#new-status form').submit(function (event) {
        event.preventDefault();
        enregistrer();
    });
});