debut de pages play avec backbone

backbonePlay

#{extends 'main.html' /}
#{set title:'Home' /}

<script src="@{'/public/javascripts/require-1.0.4.js'}" type="text/javascript" charset="${_response_encoding}"></script>

<script>

    require([
        "/public/javascripts/order.js!/public/javascripts/json2.js",
        "/public/javascripts/order.js!/public/javascripts/jquery-1.7.1.min.js",
        "/public/javascripts/order.js!/public/javascripts/underscore-1.1.6.js",
        "/public/javascripts/order.js!/public/javascripts/backbone-0.5.3.js"
    ], function () {
        window.Tarif = Backbone.Model.extend({
            url:"application/save"
        });

        window.TarifList = Backbone.Collection.extend({
            model:Tarif,
            url:"application/all"
        });


        window.MessageView = Backbone.View.extend({
            tagName:"tr",
            template:_.template($('#tr_template').html()),
            initialize:function () {
                this.model.bind('all', this.all, this);

            },
            all:function () {
                console.log("all")
            },

            render:function () {
                $(this.el).html(this.template(this.model.toJSON()));
                return this;
            }
        });


        window.AppView = Backbone.View.extend({
            el:$("#todoapp"),
            initialize:function () {
                this.collection.bind("reset", this.reset, this)
                this.collection.fetch()
            },
            render:function () {
                //Do nothing
            },
            add:function (tarif) {
                var view = new MessageView({model:tarif});
                $("#todo-list").append(view.render().el);
            },
            reset:function () {
                this.collection.each(this.add);
            }

        })

        new AppView({collection:new TarifList() });


        $(document).ready(function () {
            $("#submitAdd").click(function () {

                var tarif = new Tarif({
                    jourmin:$("#jourmin").val(),
                    jourmax:$("#jourmax").val(),
                    prixmin:$("#prixmin").val(),
                    prixmax:$("#prixmax").val(),
                    libelleChambre:$("#libelle").val()
                })

                tarif.save();


                console.log("add");
                console.log(tarif.toJSON());
            })
        });

    });

</script>

<script type="text/template" id="tr_template">
    <td><%=libelleChambre%></td>
    <td><%=jourmin%></td>
    <td><%=jourmax%></td>
    <td><%=prixmin%></td>
    <td><%=prixmax%></td>
</script>


<table id="todo-list">
    <tr>
        <th>Libelle</th>
        <th>jour min</th>
        <th>jour max</th>
        <th>prix min</th>
        <th>prix max</th>
    </tr>
</table>

<div id="output"></div>
<hr/>

<p>
    <label for="jourmin">jourmin</label>
    <input id="jourmin" name="jourmin"/>
</p>

<p>
    <label for="jourmax">jourmax</label>
    <input id="jourmax" name="jourmax"/>
</p>

<p>
    <label for="prixmin">prixmin</label>
    <input id="prixmin" name="prixmin"/>
</p>

<p>
    <label for="prixmax">prixmax</label>
    <input id="prixmax" name="prixmax"/>
</p>

<p>
    <label for="libelle">libelle</label>
    <input id="libelle" name="libelle"/>
</p>

<input type="submit" id="submitAdd"/>


</body>
</html>