Question

我正在使用谷歌地图将api置于自动完成搜索输入值。

<input data-bind="textInput: searchInput" id="location" type="text">

因此，当我开始在输入框中输入内容时，例如我输入Ro，然后从自动完成建议中选择Rome并点击提交，searchInput()的值仍为设置为Ro而不是Rome。如何在选择自动完成建议后让searchInput()更新？

Answer 1

从自动完成选择时，Google地图会触发place_changed事件。您可以捕获该事件并在Knockout可以读取的元素上触发input事件：

google.maps.event.addListener(autocomplete, 'place_changed', function () {
    ko.utils.triggerEvent(input, "input");
});

https://jsfiddle.net/dxdyqbxr/

Answer 2

自从我使用淘汰赛以来已经有一段时间了但是在您定义searchInput的ViewModel中，您将创建一个computedFunction。当您的值在文本框中更改时，它将触发自动完成功能，当选择该值时，它将更新将更新文本框的searchInput。不确定这里是否存在无限循环，所以一定要测试和调整。

google.maps.event.addListener(autocomplete, 'place_changed', function() {
  self.searchInput('autocompleteValue');
});

self.UseAutoComplete = ko.computedFunction((
  google.maps.places.Autocomplete(self.searchInput());
));

Knockout textInput绑定不更新值

2 个答案: