Question

我的整个JavaScript库是在对象文字命名空间中构建的。它包含从init（）到常用函数，控件，验证等的每个页面的逻辑。页面的init（）函数根据页面的body id被触发。

我遇到的问题是在我的控件部分。我有一个名为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 对象文字进行客观化，以便能够处理我在页面上可能拥有的任何数量的AddressEntry UserControl而不会相互覆盖？

Answer 1

根据定义，对象文字是对象的单个实例。也许你应该使用原型创建一个对象，这样你就可以创建同一个对象的多个实例。

HACK将创建一个几乎相同但名称不同的第二个对象文字。

Answer 2

以下是我提出的解决方案：

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

    }

};

Answer 3

好吧，我不知道我是否迟到发布可能的解决方案，但无论如何我都去了。

我不知道你的DOM结构或JS对象，但我会做这样的事情：

通过某些类或特殊属性获取AddressEntry类型的所有DOM元素或JS对象。为了达到这个目的，你可能不得不在其他地方改变一些东西。
循环每个元素并使用“Call”调用“init”函数。这样，每个对象或元素都将绑定到您正在进行的初始化。

看起来像这样（未经测试!!）：

SFAIC.pages.salesProcess.Applicant = {

    init : function() {         

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

代码可能会被窃听或缺少更多行以使其正常工作，但我认为这个想法很明确。希望它有所帮助，你可以将它应用到你的案例中。

对象文字处理多个实例

3 个答案: