淘汰賽JS數據綁定不工作

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，我能解決這個問題。

沒有必要將搜索作爲可觀察項。 （仍然可以嘗試value：search（）.zip等）（這是因爲Knockout不會自動展開作爲表達式一部分的觀察對象，它只會自動打開對observables的直接引用[如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; 
      }; 
     }