0

我有一个从 JSON 对象映射的 Knockout 对象。该剔除对象的值数据绑定到输入元素。

我还将谷歌位置自动完成绑定到同一个输入元素。

淘汰对象引用的值告诉我我输入的值（未选中，所以它会是'bar'）。

输入框的值是正确的值（我选择的位置，'Barnet, United Kingdom'）。

这是一个演示问题的 JSFiddle... http://jsfiddle.net/twistedinferno/CPEMk/

为什么这两个值不同，我可以将选定的值作为我的绑定值吗？（最好不需要我的 KO 对象上的其他属性）

4

2 回答 2

1

在这里更新了 JSFiddle

这是正常行为。Knockout 将其值绑定注册到它知道的事件，例如afterkeypress或blur。默认情况下，它无法“检测”其他框架（例如 Google Places API）所做的更改。因此，为了工作，您需要编写一些将事件从其他框架推送到 Knockout 的代码。

在这种情况下，Google Places Autocomplete API 支持place_changed事件。我已将此事件合并到我更新的 Fiddle 中以展示一个工作示例。有关此事件的更多信息，请参阅 Google 文档。最重要的一点是：

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    koObj.StartDescription(place.formatted_address);
    koObj.Name(place.name);
    koObj.Address(place.formatted_address);
});

但是，如果您打算多次使用此功能，我强烈建议您将此行为包装在自定义 Knockout 绑定中。

这是一篇关于自定义 Knockout 绑定的优秀文章。如果您一直滚动到最后一章，您将看到一个环绕第三方控件的 Knockout 绑定示例。您将希望对 Google Places Autocomplete 执行相同的操作，因此您可以处理使用此控件的三个方面：

  1. 初始化控件（带有小部件的可选配置选项）
  2. 通过设置事件处理程序来响应 UI 中的更新。这是通过环绕place_changed事件来实现的。
  3. 响应对视图模型所做的更新。对于您的方案，这可能不是必需的。

使用自定义敲除绑定将如下所示：

<input id="startDescription" type="text" data-bind="googleAutoComplete: StartDescription, googleAutoCompleteOptions: { componentRestrictions: { country: 'uk' } }" />

祝你好运！

于 2012-08-28T16:07:37.217 回答
1

这是我为此编写的一个简单的自定义绑定，以防有人正在搜索它：

ko.bindingHandlers.addressAutocomplete = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor(), allBindings = allBindingsAccessor();

        var options = { types: ['geocode'] };
        ko.utils.extend(options, allBindings.autocompleteOptions)

        var autocomplete = new google.maps.places.Autocomplete(element, options);

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            result = autocomplete.getPlace();
            value(result.formatted_address);
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        ko.bindingHandlers.value.update(element, valueAccessor);
    }
};

你可以像这样使用它：

<input type="text" data-bind="addressAutocomplete: Address" />

或者，如果您想指定 google 地方自动完成的选项（例如，将您的搜索限制在一个国家/地区）：

<input type="text" data-bind="addressAutocomplete: Address, autocompleteOptions: { componentRestrictions: { country: 'au' } }" />

希望能帮助到你。

（注意。默认情况下，我将自动完成功能限制为地理编码类型。）

另外，如果您想绑定到地址的特定组件，请参阅此要点https://gist.github.com/chadedrupt/5974524

于 2013-07-11T10:16:59.080 回答