BackBoneJS - Basic User Form Example

The following code example illustrates how to add user form data to collections using backboneJS.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

        <head>

                <script src="js/jquery-1.9.1.min.js"></script>
                <script src="js/underscore.js"></script>
                <script src="js/backbone-min.js"></script>
                <script src="js/backbone.syphon.js"></script>

                <script type="text/javascript">
                        $(document).ready(function() {

                                var Person = Backbone.Model.extend({

                                        defualts : {
                                                first_name : 'qwe',
                                                last_name : 'ewq',
                                                id : 0
                                        }

                                });

                                var PersonCollection = Backbone.Collection.extend({
                                        model : Person
                                });
                                var idGen = 1;
                                var PersonView = Backbone.View.extend({
                                        el : $("#personDisplay"),
                                        tmpl : _.template($("#personTemplate").html()),
                                        editTmpl : _.template($("#editPersonTemplate").html()),

                                        render : function() {

                                                if (this.model.id != 0) {
                                                        $(this.el).append(this.tmpl(this.model.toJSON()));
                                                } else {
                                                        $(this.el).append(this.editTmpl(null));
                                                }

                                        }
                                });

                                var PersonMasterView = Backbone.View.extend({

                                        el : $("#displayForm"),
                                        editTmpl : _.template($("#editPersonTemplate").html()),

                                        events : {
                                                "click #addUser" : "addUsr",
                                                "click #save" : "add"
                                        },

                                        initialize : function() {

                                                this.collection = new PersonCollection();
                                                this.render();

                                        },

                                        render : function() {
                                                //
                                                $("#personDisplay").html('');

                                                _.each(this.collection.models, function(item) {
                                                        //alert('collection iteratin->'+item.id);
                                                        var perView = new PersonView({
                                                                model : item
                                                        });
                                                        perView.render();
                                                }, this);

                                        },

                                        add : function(e) {
                                                e.preventDefault();
                                                idGen = idGen + 1;
                                                var data = (Backbone.Syphon.serialize(this));
                                                var that = this;
                                                data.id = idGen;
                                                console.log(data);
                                                //this.model.set(data);
                                                this.collection.add(data);
                                                //this.remove();
                                                this.render();
                                        },

                                        addUsr : function() {
                                                var prsn = new Person({
                                                        id : 0
                                                });
                                                this.collection.add(prsn);
                                                this.render();
                                        },
                                });

                                var pView = new PersonMasterView();

                        });

                </script>

        </head>

        <body>

                <div id="displayForm">
                        <button id="addUser">
                                User Form
                        </button>
                        <div id="personDisplay">

                        </div>

                        <div id="personFormDisplay">

                        </div>

                </div>

                <script id="editPersonTemplate" type="text/template">
                        <form id="">
                        first name: <input id="first_name" name="first_name" value="" type="text"><br/>
                        last name: <input id="last_name" name="last_name" value="" type="text"><br/>
                        <button id="save">Save</button>

                        </form>
                </script>
                <script id="personTemplate" type="text/template">
                        <div>
                        <label>first name:</label> <%= first_name %>
                        <label>last name:</label> <%= last_name %>
                        </div>

                </script>

        </body>
</html>

Technology: 

Search