对象文字处理多个实例

时间:2012-02-06 20:23:15

标签: javascript asp.net user-controls object-literal

我的整个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而不会相互覆盖?

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

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

    }

};

答案 2 :(得分:0)

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

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

  1. 通过某些类或特殊属性获取AddressEntry类型的所有DOM元素或JS对象。为了达到这个目的,你可能不得不在其他地方改变一些东西。
  2. 循环每个元素并使用“Call”调用“init”函数。这样,每个对象或元素都将绑定到您正在进行的初始化。
  3. 看起来像这样(未经测试!!):

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

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