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不会保留在Knockout中。它的内容成为$data对象，顶级上下文，您通常不会按名称使用它，这是隐含的。所以你的绑定应该是，例如，

data-bind="addressAutoComplete: mapsModel.toAddress"

Answer 2

这是一段包含代码的代码段。我删除了绑定处理程序的定义，因为它没有被创建，并且它不是你的viewmodel代码的一部分，它是Knockout的扩展。

我在这一点上得到的错误是没有google.maps.places

这样的东西

＆＃13;

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?");

＆＃13;

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

＆＃13;

使用knockout js在地图中自动完成

2 个答案: