淘汰赛 JS 数据绑定不起作用

Question

When I set the debugger at the applyBidnigns line, I can see the followings:

All properties retain an actual value but I can't map any of them to my rendering. The form is completely empty.

Binding the Model:

$(document)
            .ready(function() {
                ko.applyBindings(wqsvm, jQuery('#div_wQualitySearch')[0]);
            });

        function ViewModel() {
            var self = this;
            self.search = ko.observable(new Search());
            self.submit = function() {
                if (validator != null && validator.validate('waterqualitysearch')) {
                    self.search.geolocation = getGeocodeByZip(self.search.geolocation.zip);
                    window.location.href = '#' + self.search.buildUrl() + self.buildUrl();
                }
            };
            self.buildUrl = function() {
                var locHash = encodeQueryData(self);
                return locHash;
            };
        }
        function Search() {
            var self = this;
            self.zip = ko.observable('');
            self.distance = ko.observable(25);
            self.currentPage = ko.observable(1);
            self.pageSize = ko.observable(10);
            self.availableRadiuses = ko.observableArray([25, 50, 100, 200, 250]);
            self.geolocation = ko.observable(new geoLocation());
            self.buildUrl = function () {
                var locHash = encodeQueryData(self);
                return locHash;
            }
            self.initFromUrl = function() {
                    var locHash = window.location.hash.substring(1);
                    var location = JSON.parse('{"' +
                        decodeURI(locHash).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}');
                    self.geolocation(new geoLocation(0, 0, '', location));
                    if (location.zip !== 'undefined')
                        self.zip(location.zip);
                    if (location.distance !== 'undefined')
                        self.distance(location.distance);
                    if (location.currentpage !== 'undefined')
                        self.currentPage(location.currentpage);
                },
                self.initialize = function() {
                    if (window.location.hash) {
                        self.initFromUrl();
                    }
                }
            self.initialize();
        }
    var wqsvm = new ViewModel();

Rendering:

<div class="find-form" id="div_wQualitySearch">
    <input type="text" id="txt_QWaterZip" placeholder="ZIP Code" data-bind="value: search.zip">
    <select id="ddl_Radius" placeholder="Radius" data-bind="options: search.availableRadiuses, value: search.distance"></select>
    <a data-bind="click: submit, attr: {'class': 'button dark-blue'}" id="btn-waterSearch">Search</a>
</div>

Answer 1

I'm posting the answer to help others in the future. Thanks to @haiim770, I was able to resolve this issue.

There is no need for search to be an observable. You can still try value: search().zip etc, though (that's because Knockout won't automatically unwrap observables that are part of an expression, it will only automatically unwrap direct references to observables [like value: SomeObservable]). Bottom line is, try: self.search = new Search(); instead.

function ViewModel() {
            var self = this;
            self.search = new Search();
            self.submit = function() {
                if (validator != null && validator.validate('waterqualitysearch')) {
                    self.search.geolocation = getGeocodeByZip(self.search.geolocation.zip);
                    window.location.href = '#' + self.search.buildUrl() + self.buildUrl();
                }
            };
            self.buildUrl = function() {
                var locHash = encodeQueryData(self);
                return locHash;
            };
        }