對象字面處理多個實例

我的整個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。我能做些什麼來將對象化爲：我可以在頁面上處理儘可能多的AddressEntry UserControls，而不會互相覆蓋對象，從而使對象字面量化？

來源

2012-02-06 Code Maverick

糾正我，如果我錯了：你試圖初始化所有的AddressEntries（這是完全不同的對象或DOM元素）在一個函數（初始化函數的SFAIC.pages）。 – 2012-02-06 21:16:58

基本上。由於它是一個ASP.NET UserControl，UserControl的每個實例都使用不同的前綴ID呈現相同的元素。例如：AddressMailing控件中的AddressMailing_txtCity，AddressMailing_txtState等以及AddressGarage控件中的AddressGarage_txtCity，AddressGarage_txtState。 – 2012-02-06 21:47:17

這是我想出瞭解決方案：

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

    } 

};

來源

2012-02-06 21:43:33

對象字面量根據定義是對象的單個實例。也許你應該用原型創建一個對象，這樣你可以創建同一個對象的多個實例。

HACK將創建一個幾乎相同但名稱不同的第二個對象字面值。

來源

2012-02-06 21:09:36

好了，我不知道如果我遲到後可能的解決方案，但在這裏我去反正。

我不知道你的DOM結構或JS對象，但我會做這樣的事情：

獲取所有DOM元素或類型AddressEntry的JS對象，由某些類或特殊的屬性。爲了達到這個目的，你可能不得不改變其他地方。
循環每個元素並使用「Call」調用「init」函數。這樣每個對象或元素都將綁定到您正在執行的初始化。

它看起來是這樣的（未測試!!）：

SFAIC.pages.salesProcess.Applicant = { 

    init : function() {   

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

的代碼可能被竊聽或缺乏幾行代碼，使其工作，但我認爲這個想法是清楚的。希望它有幫助，你可以將它應用於你的案例。

來源

2012-02-06 22:14:51

對象字面處理多個實例

回答

相關問題