0

我目前正在使用 Google Maps Places API 为 Wordpress 插件 Ninja Forms 构建自定义地点自动填充字段。Ninja Forms 使用backbone.js 和 Marionette 在各种事件之后/之前监听、触发和渲染等

因此，我将介绍我当前的工作以及我想要的变量已定义和未定义的各个地方，而不是遍历所有无效的东西。我觉得从根本上说这是一个 javascript 问题，但是，我已经使用了书中的所有技巧来让事情正常工作，例如，var self = this;在调用事件侦听器之前。完全复制我的情况将非常困难，但我相信带有id属性的输入字段的 HTMLaddressAutoComplete可能足以使其工作。

'use strict';

(function ($) {
    var nfRadio = Backbone.Radio;

    var addressAutoCompleteFrontEndController = Marionette.Object.extend({

        address: "",
        formattedAddress: "",
        autocompleteAddressField: {},
        autocompleteOn: 0,
        autocomplete: {},

        initialize: function initialize() {
            // On the Field's model value change...
            var fieldsChannel = nfRadio.channel('fields');
            this.listenTo(fieldsChannel, 'keyup:field', this.onKeyup);
            this.listenTo(fieldsChannel, 'blur:field', this.onBlur);
        },

        onKeyup: function(model) {
            var place;
            this.autocompleteAddressField = document.getElementById('addressAutoComplete');
            this.autocomplete = new google.maps.places.Autocomplete(this.autocompleteAddressField, {types: ['geocode']} );
            this.autocompleteOn = 1;

            var self = this;
            this.autocomplete.addListener('place_changed', function() {
                place = this.getPlace();
                self.formattedAddress = place.formatted_address;
                console.log(place.formatted_address); // Defined
            });

            console.log(this.formattedAddress); // Undefinied
        },

        onBlur: function(model) {
            var place;
            this.autocompleteAddressField = document.getElementById('addressAutoComplete');
            this.autocomplete = new google.maps.places.Autocomplete(this.autocompleteAddressField, {types: ['geocode']} );
            this.autocompleteOn = 1;

            var self = this;
            this.autocomplete.addListener('place_changed', function() {
                place = this.getPlace();
                self.formattedAddress = place.formatted_address;
                console.log(place.formatted_address); // Defined
            });

            console.log(this.formattedAddress); // Undefined
        }
    });

    $(document).ready(function () {
        new addressAutoCompleteFrontEndController();
    });

})(jQuery);

因此，实际上，在this.autocomplete.addListener回调函数内部 - 我可以完全访问place.formatted_address，这给了我用户选择的内容。但我似乎无法将它绑定到this.formattedAddress......我希望有一个 JS 专家可以说，“你需要做的就是这个......”。希望！:D

其他想法：我认为我不能为此使用 ES6 语法。我在想我也许可以利用箭头功能=>？？

4

1 回答 1

0

您在触发回调console.log(this.formattedAddress); // Undefined之前执行，这将设置.place_changedthis.formattedAddress

直到 a keyuporblur发生，它设置了一个place_changed事件侦听器，然后当一个place_changed事件实际触发时，才发生绑定。
在此之前，它是未定义的。这就是您在控制台中看到的内容。

如果你console.log(this.formattedAddress);在回调内部移动，你会看到绑定确实发生了。

顺便说一句，您似乎在没有任何清理的情况下在事件侦听器中添加事件侦听器，这是非常邪恶的。每次 a keyuporblur发生时，您都会添加新的事件侦听器，这些侦听器对自动完成执行相同的操作。

于 2019-01-30T11:32:57.770 回答