ノックアウト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のおかげで、私はこの問題を解決することができました。

観察が観察可能である必要はありません。ただし、Knockoutは式の一部であるオブザーバブルを自動的にアンラップしないので、observables [like value：SomeObservable]など）への直接参照を自動的にアンラップするだけで、値：search（）。zipなどを試すことができます。一番下の行は、try：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; 
      }; 
     }