sangkyunyoon · February 21, 2016 11:03 · Jun 15, 2011 · Jun 15, 2011 · Jun 15, 2011 · Jun 15, 2011
diff --git a/5-TheCompleteExample.html b/5-TheCompleteExample.html
@@ -0,0 +1,61 @@
+<html>
+  <head>
+    <script src="jquery-1.6.1.min.js"></script> 
+    <script src="json2.js"></script> 
+    <script src="underscore-min.js"></script> 
+    <script src="backbone-min.js"></script> 
+    <script language="javascript">
+      $(function(){
+        var SomeModel = Backbone.Model.extend({});
+
+        someModel = new SomeModel();
+        someModel.bind("change", function(model, collection){
+          alert("You set some_attribute to " + model.get('some_attribute'));
+        });
+
+        someModel.set({some_attribute: "some value"});
+
+        var Credentials = Backbone.Model.extend({});
+
+        var LoginView = Backbone.View.extend({
+          el: $("#login-form"),
+
+          events: {
+            "click #login": "login"
+          },
+
+          initialize: function(){
+            var self = this;
+
+            this.username = $("#username");
+            this.password = $("#password");
+
+            this.username.change(function(e){
+              self.model.set({username: $(e.currentTarget).val()});
+            });
+
+            this.password.change(function(e){
+              self.model.set({password: $(e.currentTarget).val()});
+            });
+          },
+
+          login: function(){
+            var user= this.model.get('username');
+            var pword = this.model.get('password');
+            alert("You logged in as " + user + " and a password of " + pword);
+            return false;
+          }
+        });
+
+        window.LoginView = new LoginView({model: new Credentials()});
+      });
+    </script>
+  </head>
+  <body>
+    <form action="/login" id="login-form">
+      Username: <input type="text" id="username"><br>
+      Password: <input type="password" id="password"><br>
+      <button id="login">Login</button>
+    </form>
+  </body>
+</html>
diff --git a/3-SimpleLoginForm.html b/3-SimpleLoginForm.html
@@ -1,5 +1,5 @@
 <form action="/login" id="login-form">
   Username: <input type="text" id="username"><br>
   Password: <input type="password" id="password"><br>
-  <input type="submit" id="login" value="Login">
+  <button id="login">Login</button>
 </form>
diff --git a/4-LoginView.js b/4-LoginView.js
@@ -0,0 +1,33 @@
+var Credentials = Backbone.Model.extend({});
+
+var LoginView = Backbone.View.extend({
+  el: $("#login-form"),
+
+  events: {
+    "click #login": "login"
+  },
+
+  initialize: function(){
+    var self = this;
+
+    this.username = $("#username");
+    this.password = $("#password");
+
+    this.username.change(function(e){
+      self.model.set({username: $(e.currentTarget).val()});
+    });
+
+    this.password.change(function(e){
+      self.model.set({password: $(e.currentTarget).val()});
+    });
+  },
+
+  login: function(){
+    var user= this.model.get('username');
+    var pword = this.model.get('password');
+    alert("You logged in as " + user + " and a password of " + pword);
+    return false;
+  }
+});
+
+window.LoginView = new LoginView({model: new Credentials()});
diff --git a/3-SimpleLoginForm.html b/3-SimpleLoginForm.html
@@ -1,4 +1,4 @@
-<form target="/login" action="post" id="login-form">
+<form action="/login" id="login-form">
   Username: <input type="text" id="username"><br>
   Password: <input type="password" id="password"><br>
   <input type="submit" id="login" value="Login">

diff --git a/3-SimpleLoginForm.html b/3-SimpleLoginForm.html
@@ -0,0 +1,5 @@
+<form target="/login" action="post" id="login-form">
+  Username: <input type="text" id="username"><br>
+  Password: <input type="password" id="password"><br>
+  <input type="submit" id="login" value="Login">
+</form>
diff --git a/1-ModelWithChangedEvents.js b/1-ModelWithChangedEvents.js
@@ -1,8 +1,9 @@
 var SomeModel = Backbone.Model.extend({});
 
 someModel = new SomeModel();
-someModel.bind("changed", function(attrs){
-  alert("You set some_attribute to " + attrs.some_attribute);
+
+someModel.bind("change", function(model, collection){
+  alert("You set some_attribute to " + model.get('some_attribute'));
 });
 
 someModel.set({some_attribute: "some value"});
diff --git a/2-ModelToJSON.js b/2-ModelToJSON.js
@@ -0,0 +1 @@
+var someJSON = someModel.ToJSON();
diff --git a/1-ModelWithChangedEvents.js b/1-ModelWithChangedEvents.js
@@ -0,0 +1,8 @@
+var SomeModel = Backbone.Model.extend({});
+
+someModel = new SomeModel();
+someModel.bind("changed", function(attrs){
+  alert("You set some_attribute to " + attrs.some_attribute);
+});
+
+someModel.set({some_attribute: "some value"});