diff options
| author | Thomas Davis <thomasalwyndavis@gmail.com> | 2012-10-24 10:22:29 +0000 |
|---|---|---|
| committer | Thomas Davis <thomasalwyndavis@gmail.com> | 2012-10-24 10:22:29 +0000 |
| commit | aa596cb77d2beb7fbebb7a07e6b6bfb5d774e1c9 (patch) | |
| tree | b6288c2ced92c7c10be81f751b8daa3cd1b0e414 | |
| parent | bfccb22b053b27008675ee01f62b4d80bad54153 (diff) | |
| download | backbonetutorials-aa596cb77d2beb7fbebb7a07e6b6bfb5d774e1c9.zip backbonetutorials-aa596cb77d2beb7fbebb7a07e6b6bfb5d774e1c9.tar.gz backbonetutorials-aa596cb77d2beb7fbebb7a07e6b6bfb5d774e1c9.tar.bz2 | |
video tutorial coming oson
| -rw-r--r-- | videos/beginner/index.html | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/videos/beginner/index.html b/videos/beginner/index.html new file mode 100644 index 0000000..d24327b --- /dev/null +++ b/videos/beginner/index.html @@ -0,0 +1,176 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>BackboneTutorials.com Beginner Video</title> + <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css"> +</head> +<body> + + + <div class="container"> + <h1>User Manager</h1> + <hr /> + <div class="page"></div> + </div> + + + <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> + <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js" type="text/javascript"></script> + <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script> + + <script type="text/template" id="user-list-template"> + <a href="#/new" class="btn btn-primary">New</a> + <hr /> + <table class="table striped"> + <thead> + <tr> + <th>First Name</th><th>Last Name</th><th>Age</th><th></th> + </tr> + </thead> + <tbody> + <% _.each(users, function(user) { %> + <tr> + <td><%= user.get('firstname') %></td> + <td><%= user.get('lastname') %></td> + <td><%= user.get('age') %></td> + <td><a class="btn" href="#/edit/<%= user.id %>">Edit</a></td> + </tr> + <% }); %> + </tbody> + </table> + </script> + + <script type="text/template" id="edit-user-template"> + <form class="edit-user-form"> + <legend><%= user ? 'Edit' : 'New' %> User</legend> + <label>First Name</label> + <input name="firstname" type="text" value="<%= user ? user.get('firstname') : '' %>"> + <label>Last Name</label> + <input name="lastname" type="text" value="<%= user ? user.get('lastname') : '' %>"> + <label>Age</label> + <input name="age" type="text" value="<%= user ? user.get('age') : '' %>"> + <hr /> + <button type="submit" class="btn"><%= user ? 'Update' : 'Create' %></button> + <% if(user) { %> + <input type="hidden" name="id" value="<%= user.id %>" /> + <button data-user-id="<%= user.id %>" class="btn btn-danger delete">Delete</button> + <% }; %> + </form> + </script> + + <script> + $.fn.serializeObject = function() { + var o = {}; + var a = this.serializeArray(); + $.each(a, function() { + if (o[this.name] !== undefined) { + if (!o[this.name].push) { + o[this.name] = [o[this.name]]; + } + o[this.name].push(this.value || ''); + } else { + o[this.name] = this.value || ''; + } + }); + return o; + }; + + $.ajaxPrefilter( function( options, originalOptions, jqXHR ) { + options.url = 'http://backbonejs-beginner.herokuapp.com' + options.url; + }); + + var Users = Backbone.Collection.extend({ + url: '/users' + }); + + var User = Backbone.Model.extend({ + urlRoot: '/users' + }); + + var UserListView = Backbone.View.extend({ + el: '.page', + render: function () { + var that = this; + var users = new Users(); + users.fetch({ + success: function (users) { + var template = _.template($('#user-list-template').html(), {users: users.models}); + that.$el.html(template); + } + }) + } + }); + + var userListView = new UserListView(); + + var UserEditView = Backbone.View.extend({ + el: '.page', + events: { + 'submit .edit-user-form': 'saveUser', + 'click .delete': 'deleteUser' + }, + saveUser: function (ev) { + var userDetails = $(ev.currentTarget).serializeObject(); + var user = new User(); + user.save(userDetails, { + success: function (user) { + router.navigate('', {trigger:true}); + } + }); + return false; + }, + deleteUser: function (ev) { + this.user.destroy({ + success: function () { + console.log('destroyed'); + router.navigate('', {trigger:true}); + } + }) + }, + render: function (options) { + var that = this; + if(options.id) { + that.user = new User({id: options.id}); + that.user.fetch({ + success: function (user) { + var template = _.template($('#edit-user-template').html(), {user: user}); + that.$el.html(template); + } + }) + } else { + var template = _.template($('#edit-user-template').html(), {user: null}); + that.$el.html(template); + } + } + }); + + var userEditView = new UserEditView(); + + var Router = Backbone.Router.extend({ + routes: { + "": "home", + "edit/:id": "edit", + "new": "edit", + } + }); + + var router = new Router; + router.on('route:home', function() { + // render user list + userListView.render(); + }) + router.on('route:edit', function(id) { + userEditView.render({id: id}); + }) + Backbone.history.start(); + </script> + + +</body> +</html> + +<!-- + + http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery + -->
\ No newline at end of file |