объектный литерал, обрабатывающий несколько экземпляров

Question

Вся моя библиотека JavaScript построена в пространстве имен литералов объектов. Он содержит логику каждой страницы от init () до общих функций, элементов управления, проверки и т. Д. Функция init () страницы запускается на основе идентификатора тела страницы.

Проблема у меня в разделе управления. У меня есть литерал объекта с именем AddressEntry. Этот литерал объекта содержит функциональные возможности, относящиеся к моему AddressEntry ASP.NET UserControl. Он прекрасно работает с одним элементом управления AddressEntry на странице, но если их несколько, то только последний на странице работает как задумано.

Вот мой литерал объекта AddressEntry (обрезан до соответствующей информации):

SFAIC.ctrls.AddressEntry = {

    inputs : {

        city        : undefined,
        cityState   : undefined,

        hidden : {

            city    : undefined,
            state   : undefined

        },  

    },

    fn : {

        root : undefined,

        citySelected : function($ddl) {

            var $selected = $ddl.find(":selected");

            this.root.inputs.hidden.city.val($selected.val());          
            this.root.inputs.hidden.state.val($selected.text().split(", ")[1]);

        }

    },

    init : function(addressId) { 

        var self    = this,
            fn      = self.fn,
            inputs  = self.inputs,
            hidden  = inputs.hidden;

            inputs.city         = SFAIC.fn.getContentElement(addressId + "_ddlCity",                SFAIC.$updatePanel);
            inputs.cityState    = SFAIC.fn.getContentElement(addressId + "_ddlCityStateLocked",     SFAIC.$updatePanel);
            hidden.city         = SFAIC.fn.getContentElement(addressId + "_txtCity",                SFAIC.$updatePanel);
            hidden.state        = SFAIC.fn.getContentElement(addressId + "_txtState",               SFAIC.$updatePanel);

            fn.root = this;

        inputs.city.change(function() { fn.citySelected($(this)); });
        inputs.cityState.change(function() { fn.citySelected($(this)); });

    }

};

Тогда литерал объекта страницы будет выглядеть примерно так (опять же, обрезано):

SFAIC.pages.salesProcess.Applicant = {

    init : function() {         

        SFAIC.ctrls.AddressEntry.init("AddressGarage");
        SFAIC.ctrls.AddressEntry.init("AddressMailing");

    }

};

Для меня очевидно, что AddressMailing init переопределяет AddressGarage init. Что я могу сделать, чтобы объективировать объектный литерал SFAIC.ctrls.AddressEntry , чтобы иметь возможность обрабатывать столько элементов UserControl AddressEntry, сколько у меня может быть на странице, без их переопределения друг друга?

Answer 1

Литерал объекта по определению является единственным экземпляром объекта.Возможно, вам следует создавать объект с использованием прототипов, чтобы вы могли создавать несколько экземпляров одного и того же объекта.

HACK - создание второго литерала объекта, который почти одинаков, но с другим именем.

Answer 2

Ну, я не знаю, опоздал ли я опубликовать возможное решение, но я все равно пойду.

Я не знаю вашу структуру DOM или объекты JS, но что бы я делал примерно так:

1. Получить все элементы DOM или объекты JS типа AddressEntry по некоторому классу или специальному атрибуту. Возможно, вам придется что-то изменить в другом месте, чтобы добиться этого.
2. Выполните цикл каждого элемента и вызовите функцию «init», используя «Call». Таким образом, каждый объект или элемент будут привязаны к инициализации, которую вы делаете.

Это будет выглядеть примерно так (не проверено!):

SFAIC.pages.salesProcess.Applicant = {

    init : function() {         

        $('.addresses').each(function (i) {
            SFAIC.ctrls.AddressEntry.init.call(this, this.attr('id'); });
    }
};

Возможно, код содержит ошибку или не хватает нескольких строк, чтобы заставить его работать, но я думаю, что идея ясна. Надеюсь, что это поможет, и вы можете применить его к вашему делу.

Answer 3

Вот решение, которое я придумал:

SFAIC.ctrls.AddressEntry = function(addressId) {

    var ctrl = {

            inputs : {

                city        : undefined,
                cityState   : undefined,

                hidden : {

                    city    : undefined,
                    state   : undefined

                },  

            },

            fn : {

                root : undefined,

                citySelected : function($ddl) {

                    var $selected = $ddl.find(":selected");

                    this.root.inputs.hidden.city.val($selected.val());          
                    this.root.inputs.hidden.state.val($selected.text().split(", ")[1]);

                }

            },

            init : function(addressId) { 

                var self    = this,
                    fn      = self.fn,
                    inputs  = self.inputs,
                    hidden  = inputs.hidden;

                    inputs.city         = SFAIC.fn.getContentElement(addressId + "_ddlCity",                SFAIC.$updatePanel);
                    inputs.cityState    = SFAIC.fn.getContentElement(addressId + "_ddlCityStateLocked",     SFAIC.$updatePanel);
                    hidden.city         = SFAIC.fn.getContentElement(addressId + "_txtCity",                SFAIC.$updatePanel);
                    hidden.state        = SFAIC.fn.getContentElement(addressId + "_txtState",               SFAIC.$updatePanel);

                    fn.root = this;

                inputs.city.change(function() { fn.citySelected($(this)); });
                inputs.cityState.change(function() { fn.citySelected($(this)); });

            }

    };

    ctrl.init();

    return ctrl;    

};          

SFAIC.pages.salesProcess.Applicant = {

    init : function() {         

        var garage, mailing;

        garage = SFAIC.ctrls.AddressEntry("AddressGarage");
        mailing = SFAIC.ctrls.AddressEntry("AddressMailing");

    }

};