複数のインスタンスを処理するオブジェクトリテラル

Question

私のJavaScriptライブラリ全体は、オブジェクトリテラル名前空間に構築されています。 init（）から共通の関数、コントロール、検証などの各ページのロジックが含まれています。ページのinit（）関数は、ページのボディIDに基づいて起動されます。

問題はコントロールセクションにあります。 AddressEntryという名前のオブジェクトリテラルがあります。このオブジェクトリテラルには、AddressEntry ASP.NET UserControlを処理する機能が含まれています。ページ上の1つの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)); }); 

    } 

}; 

：ここ

は文字通り私ののAddressEntryオブジェクト（関連情報までトリミング）です。

SFAIC.pages.salesProcess.Applicant = { 

    init : function() {   

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

    } 

}; 

アドレスメール initは、アドレスガーベッジ initを上書きします。お互いを上書きせずにページに表示できるAddressEntry UserControlsを処理できるようにするには、SFAIC.ctrls.AddressEntryオブジェクトリテラルをオブジェクト化するために何ができますか？

Answer 1

ここに私が思い付いたソリューションです：

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 2

オブジェクトリテラルは、定義上、オブジェクトの単一インスタンスです。おそらく、同じオブジェクトの複数のインスタンスを作成できるように、プロトタイプを使用してオブジェクトを作成する必要があります。

ハックは、ほぼ同じであるが名前が異なる2番目のオブジェクトリテラルを作成することです。

Answer 3

まあ、私は可能な解決策を投稿する遅刻かどうかは知りませんが、ここで私はとにかく行きます。

私はあなたのDOM構造やJSのオブジェクトを知らないが、私はこのような何かをするだろう何

：

1. は、いくつかのクラスまたは特別な属性により、すべてのDOM要素またはタイプのAddressEntryのJSオブジェクトを取得します。これを達成するには、他の場所を変更する必要があります。
2. 各要素を循環させ、 "呼び出し"を使用して "init"関数を呼び出します。そうすれば、各オブジェクトまたは要素は、あなたがやっている初期化に束縛されます。

それはこのようなものになります（テストしていませんが!!）：

SFAIC.pages.salesProcess.Applicant = { 

    init : function() {   

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

コードが盗聴やそれを動作させるためにいくつかのより多くの行を欠いているが、私はアイデアは明らかだと思うことがあります。それが欲しいと思ったら、それをあなたのケースに適用することができます。