More viewmodel and styling updates

sunshowers · May 14, 2012 · 70b9268 · 70b9268
1 parent 300c0fd
commit 70b9268
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 34 deletions.
diff --git a/html/index.html b/html/index.html
@@ -26,7 +26,7 @@ <h1>Step 1: Think of a number.</h1>
           <label for="num-digits">
           How many digits does your number have?
           </label>
-          <input name="num-digits" maxlength="1" type="text" data-bind="value: numDigits" pattern="[2-5]" />
+          <input name="num-digits" maxlength="1" type="text" data-bind="value: numDigitsText, valueUpdate: 'afterkeydown'" pattern="[2-5]" required />
           <a data-bind="click: moveToStep2" href="#">Next</a>
         </div>
       </div>

diff --git a/html/js/script.js b/html/js/script.js
@@ -20,52 +20,52 @@ ko.bindingHandlers.range = {
   }
 };
 
-ko.extenders.integer = function (target) {
-  var result = ko.dependentObservable({
-    read: target,
-    write: function(val) {
-      var current = target();
-      var num = (val === "" || isNaN(val)) ? 0 : parseInt(val);
-      if (num !== current) {
-        target(num);
-      }
-      else {
-        if (val !== current)
-          target.notifySubscribers(num);
-      }
-    }
+function makeIntComputed(parent) {
+  var result = ko.computed(function () {
+    var val = parent();
+    var num = (val === "" || isNaN(val)) ? 0 : parseInt(val);
+    return num;
   });
   return result;
-};
-var viewModel = {
-  numDigits: ko.observable(4).extend({integer: true}),
-  _setupNextGuess: function (data) {
+}
+
+function ViewModel() {
+  this.numDigitsText = ko.observable(4);
+  this.numDigits = makeIntComputed(this.numDigitsText);
+
+  this._setupNextGuess = function (data) {
     this.addGuessURL(data.addGuessURL);
     this.currentGuess(data.nextGuess);
-  },
-  moveToStep2: function () {
-    moveTo(2);
-  },
-  moveToStep1: function () {
+  };
+
+  this.moveToStep1 = function () {
     moveTo(1);
-  },
-  handleGuessResponse: function () {
+  };
+  this.moveToStep2 = function () {
+    moveTo(2);
+  };
+
+  this.handleGuessResponse = function () {
     this.guesses.unshift({guess: this.currentGuess(),
                           correctDigits: this.currentCorrectDigits()});
     var self = this;
     $.post(this.addGuessURL(), ko.toJSON(this), function (data) {
       console.log("Incoming data: " + JSON.stringify(data));
       self._setupNextGuess(data);
     });
-  },
-  resetGuesses: function() {
+  };
+
+  this.resetGuesses = function() {
     this.addGuessURL("");
     this.currentGuess(0);
     this.currentCorrectDigits(0);
     this.guesses([]);
-  },
-  addGuessURL: ko.observable(""),
-  currentGuess: ko.observable("0"),
-  currentCorrectDigits: ko.observable(0).extend({integer: true}),
-  guesses: ko.observableArray([])
-};
+  };
+
+  this.addGuessURL = ko.observable("");
+  this.currentGuess = ko.observable("0");
+  this.currentCorrectDigits = ko.observable(0);
+  this.guesses = ko.observableArray([]);
+}
+
+var viewModel = new ViewModel();