Question

当我在applyBidnigns行设置调试器时，我可以看到以下内容：

所有属性都保留实际值，但我无法将其中的任何属性映射到渲染中。表格完全是空的。

绑定模型：

$(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();

渲染：

<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

我将在未来发布帮助其他人的答案。感谢@ haiim770，我能够解决这个问题。

搜索不需要是可观察的。你仍然可以尝试使用值：search（）。zip等（因为Knockout不会自动解包作为表达式一部分的observable，它只会自动解包对observable的直接引用[如value：SomeObservable]）。底线是，尝试：self.search = new Search（）;代替。

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;
            };
        }

Knockout JS数据绑定不起作用

1 个答案: