Question

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

我还将google自动完成功能绑定到同一个输入元素。

knockout对象引用的值告诉我输入的值（未选中，因此它将是'bar'）。

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

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

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

Answer 1

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

在这种情况下，Google地方信息自动填充API支持place_changed事件。我已经在我更新的小提琴中加入了这个活动，以展示一个有效的例子。 See the Google documentation for more information about this event。最重要的一点是：

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);
});

但是，如果您打算多次使用此功能，我强烈建议您将此行为包含在custom Knockout binding中。

Here's an excellent article about custom Knockout bindings。如果您一直向下滚动到最后一章，您将看到一个包围第三方控件的Knockout绑定示例。您需要对Google商家信息自动填充功能执行相同的操作，因此您可以处理使用此控件的三个方面：

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

使用自定义的敲除绑定看起来像这样：

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

Answer 2

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

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

绑定的Knockout值与input元素的值之间的差异

2 个答案: