keep the input's value in sync with the model

rniemeyer · Dec 13, 2013 · be6e0d0 · be6e0d0
1 parent a03538f
commit be6e0d0
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 12 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "knockout-jqAutocomplete",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "build/knockout-jqAutocomplete.min.js",
   "ignore": [
     "examples",

diff --git a/build/knockout-jqAutocomplete.js b/build/knockout-jqAutocomplete.js
@@ -1,4 +1,4 @@
-// knockout-jqAutocomplete 0.1.1 | (c) 2013 Ryan Niemeyer |  http://www.opensource.org/licenses/mit-license
+// knockout-jqAutocomplete 0.1.2 | (c) 2013 Ryan Niemeyer |  http://www.opensource.org/licenses/mit-license
 ;(function(factory) {
     if (typeof define === "function" && define.amd) {
         // AMD anonymous module
@@ -9,11 +9,12 @@
     }
 })(function(ko, $) {
     var JqAuto = function() {
-        var self = this;
+        var self = this,
+            unwrap = ko.utils.unwrapObservable; //support older KO versions that did not have ko.unwrap
 
         //binding's init function
         this.init = function(element, valueAccessor, allBindings, data, context) {
-            var options = ko.unwrap(valueAccessor()),
+            var options = unwrap(valueAccessor()),
                 config = {},
                 filter = typeof options.filter === "function" ? options.filter : self.defaultFilter;
 
@@ -61,6 +62,14 @@
             });
         };
 
+        //the binding's update function. keep value in sync with model
+        this.update = function(element, valueAccessor) {
+            var options = unwrap(valueAccessor()),
+                value = unwrap(options && options.value);
+
+            element.value = value;
+        };
+
         //if dealing with local data, the default filtering function
         this.defaultFilter = function(item, term) {
             term = term && term.toLowerCase();
@@ -70,7 +79,7 @@
         //filter/map options to be in a format that autocomplete requires
         this.processOptions = function(valueAccessor, filter, data, request, response) {
             var item, index, length,
-                items = ko.unwrap(data) || [],
+                items = unwrap(data) || [],
                 results = [],
                 props = this.getPropertyNames(valueAccessor);
 

diff --git a/build/knockout-jqAutocomplete.min.js b/build/knockout-jqAutocomplete.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "knockout-jqAutocomplete",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-uglify": "0.x.x",
@@ -11,4 +11,4 @@
     "grunt-template-jasmine-istanbul": "0.x.x",
     "grunt-bower-task": "~0.3.4"
   }
-}
+}
diff --git a/spec/knockout-jqAutocomplete.spec.js b/spec/knockout-jqAutocomplete.spec.js
@@ -503,6 +503,18 @@ describe("knockout-jqAutocomplete", function(){
         });
     });
 
+    describe("update function", function() {
+        it("should set the input's value", function() {
+            instance.update(input, function() {
+                return {
+                    value: ko.observable("test")
+                };
+            });
+
+            expect(input.value).toEqual("test");
+        });
+    });
+
     describe("using the binding", function() {
         it("should allow binding against strings", function() {
             var $listItems,
@@ -753,5 +765,37 @@ describe("knockout-jqAutocomplete", function(){
 
             expect($input.text()).toEqual("one description");
         });
+
+        it("should initially set the input's value", function() {
+            var items = [],
+                value = ko.observable("testing");
+
+            ko.applyBindingsToNode(input, {
+                jqAuto: {
+                    value: value,
+                    source: items
+                }
+            });
+
+            expect(input.value).toEqual("testing");
+        });
+
+        it("should update the input's value when the observable changes", function() {
+            var items = [],
+                value = ko.observable("testing");
+
+            ko.applyBindingsToNode(input, {
+                jqAuto: {
+                    value: value,
+                    source: items
+                }
+            });
+
+            expect(input.value).toEqual("testing");
+
+            value("updated");
+
+            expect(input.value).toEqual("updated");
+        });
     });
 });
diff --git a/src/knockout-jqAutocomplete.js b/src/knockout-jqAutocomplete.js
@@ -8,11 +8,12 @@
     }
 })(function(ko, $) {
     var JqAuto = function() {
-        var self = this;
+        var self = this,
+            unwrap = ko.utils.unwrapObservable; //support older KO versions that did not have ko.unwrap
 
         //binding's init function
         this.init = function(element, valueAccessor, allBindings, data, context) {
-            var options = ko.unwrap(valueAccessor()),
+            var options = unwrap(valueAccessor()),
                 config = {},
                 filter = typeof options.filter === "function" ? options.filter : self.defaultFilter;
 
@@ -60,6 +61,14 @@
             });
         };
 
+        //the binding's update function. keep value in sync with model
+        this.update = function(element, valueAccessor) {
+            var options = unwrap(valueAccessor()),
+                value = unwrap(options && options.value);
+
+            element.value = value;
+        };
+
         //if dealing with local data, the default filtering function
         this.defaultFilter = function(item, term) {
             term = term && term.toLowerCase();
@@ -69,7 +78,7 @@
         //filter/map options to be in a format that autocomplete requires
         this.processOptions = function(valueAccessor, filter, data, request, response) {
             var item, index, length,
-                items = ko.unwrap(data) || [],
+                items = unwrap(data) || [],
                 results = [],
                 props = this.getPropertyNames(valueAccessor);