ノックアウトjsを使用したマップのオートコンプリート

Question

入力を入力しているときにオートコンプリートを設定しようとしていますが、動作していないようです。コンソールにエラーは表示されませんが、オートコンプリートは機能しません。

ここでは、コードです：

var mapApplication = function(){ 

    var mapsModel = { 
     fromAddress: ko.observable(), 
     toAddress: ko.observable() 
    }; 
    // method to add custom binding handler to the KO 
    var configureBindingHandlers = function(){ 
     // custom binding for address auto complete 
     ko.bindingHandlers.addressAutoComplete = { 
      init: function(element, valueAccessor){ 
      //create autocomplete object 
      var autocomplete = new google.maps.places.Autocomplete(element, {types:['geocode']}); 
      // when user selects an address from the drop down, populate the address in the model. 
      var value = valueAccessor(); 
      google.maps.event.addListener(autocomplete, 'place_changed', function(){ 
       var place = autocomplete.getPlace(); 
       console.log(place); 
       value(place); 
      }); 
      } 
     }; 
    }; 

    var init = function(){ 
     // add code to initialise the module 
     ko.applyBindings(mapApplication); 
    }; 

    // execute the init function when the DOM is ready 
    $(init); 

    return { 
     // add member that will be exposed publicly 
     mapsModel: mapsModel 
    }; 
}(); 

とHTML：

<div class="panel-heading">Address</div> 
<div class="panel-body"> 
    <div id="addressFromFields" class="form-group"> 
    <label for="autocompleteFromAddress"> From Address</label> 
    <input id="autocompleteFromAddress" class="form-control" data-bind="addressAutoComplete: mapApplication.mapsModel.fromAddress" placeholder="where are u from" type="text"> 
    </div> 

    <div id="addressToFields" class="form-group"> 
    <label for="autocompleteToAddress"> From Address</label> 
    <input id="autocompleteToAddress" class="form-control" data-bind="addressAutoComplete: mapApplication.mapsModel.toAddress" placeholder="where are you going" type="text"> 
    </div> 
</div> 

Answer 1

あなたko.applyBindings(mapApplication)、名前mapApplicationがノックアウト内部に保持されていません。その内容は$dataオブジェクトになります。通常、名前では使用しないトップレベルのコンテキストです。したがって、バインディングはたとえば

data-bind="addressAutoComplete: mapsModel.toAddress" 

Answer 2

などです。ここにコードが含まれているスニペットです。私はバインディングハンドラーの定義を引き出しました。なぜなら、それは作成されていなかったし、あなたのビューモデルコードの一部でもないからです。ノックアウトの拡張です。

私はこの時点で取得エラーがgoogle.maps.places

ko.bindingHandlers.addressAutoComplete = { 
 
    init: function(element, valueAccessor) { 
 
    console.debug('GMP', google.maps); 
 
    //create autocomplete object 
 
    var autocomplete = new google.maps.places.Autocomplete(element, { 
 
     types: ['geocode'] 
 
    }); 
 
    console.debug("Autocomplete:", autocomplete); 
 
    // when user selects an address from the drop down, populate the address in the model. 
 
    var value = valueAccessor(); 
 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
     var place = autocomplete.getPlace(); 
 
     console.log(place); 
 
     value(place); 
 
    }); 
 
    } 
 
}; 
 

 
var mapApplication = function() { 
 

 
    var mapsModel = { 
 
    fromAddress: ko.observable(), 
 
    toAddress: ko.observable() 
 
    }; 
 

 
    var init = function() { 
 
    // add code to initialise the module 
 
    ko.applyBindings(mapApplication); 
 
    }; 
 

 
    // execute the init function when the DOM is ready 
 
    $(init); 
 

 
    return { 
 
    // add member that will be exposed publicly 
 
    mapsModel: mapsModel 
 
    }; 
 
}(); 
 

 
console.debug("What is going on?");

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script> 
 

 
<div class="panel-heading">Address</div> 
 
<div class="panel-body"> 
 
    <div id="addressFromFields" class="form-group"> 
 
    <label for="autocompleteFromAddress">From Address</label> 
 
    <input id="autocompleteFromAddress" class="form-control" data-bind="addressAutoComplete: mapApplication.mapsModel.fromAddress" placeholder="where are u from" type="text"> 
 
    </div> 
 

 
    <div id="addressToFields" class="form-group"> 
 
    <label for="autocompleteToAddress">From Address</label> 
 
    <input id="autocompleteToAddress" class="form-control" data-bind="addressAutoComplete: mapApplication.mapsModel.toAddress" placeholder="where are you going" type="text"> 
 
    </div> 
 
</div>