Ошибка связывания this.getPlace () автозаполнения помещает Объект в backbone.js и Marionette - PullRequest
Новая
       24

Ошибка связывания this.getPlace () автозаполнения помещает Объект в backbone.js и Marionette

0 голосов
/ 30 января 2019

В настоящее время я работаю над созданием поля автозаполнения пользовательских мест, используя API Google Maps Places для плагина Wordpress Ninja Forms.Ninja Forms использует backbone.js и Marionette для прослушивания, запуска и рендеринга после / до различных событий и т. Д.

Итак, вместо того, чтобы просматривать все многочисленные вещи, которые не работали, я включу мою текущую работуи различные места, где переменная, которую я хочу, определена и неопределена.Я чувствую, что по сути это проблема javascript, однако я использовал все возможные приемы в книге, чтобы заставить вещи работать, например, var self = this; до вызова слушателя событий.Будет очень сложно полностью воспроизвести мою ситуацию, но я полагаю, что HTML с полем ввода с атрибутом id addressAutoComplete может быть достаточно для этой работы. 

'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 для этого.Я думал, что мог бы, возможно, использовать функцию стрелки => ??

1 Ответ

0 голосов
/ 30 января 2019

Вы выполняете console.log(this.formattedAddress); // Undefined до вызова обратного вызова place_changed, который устанавливает this.formattedAddress.

До тех пор, пока keyup или blur не произойдет, что настроит прослушиватель события place_changedи затем, когда действительно срабатывает событие place_changed, только тогда происходит связывание.
До того, как это произойдет, оно не определено.И это то, что вы видите в консоли.

Если вы переместите console.log(this.formattedAddress); в обратный вызов, вы увидите, что привязка действительно происходит.

Кстати, похоже, вы добавляетеслушатели событий внутри слушателя событий без какой-либо очистки, что является очень злым.Каждый раз, когда происходит keyup или blur, вы добавляете новых слушателей событий, которые делают то же самое с автозаполнением.

...