Backbone.Component-Backbone.jsのスタンドアロンUIコンポーネント

このプロジェクトでは、 Backbone.jsをメインのJSフレームワークとして使用します。 なぜ選択が彼にかかったのか、私はまだ次の投稿のいずれかであなたに話すかもしれません、今度は何か他のものについて話します。 ご存知のように、Backboneは箱から非常に控えめな機能を提供し、これを最大限の柔軟性で補正します。 Backboneは長い間存在しており、開発者の真剣なコミュニティを獲得できたため、今日では多くの典型的なBackboneアプリケーションの問題を解決するためのBackbone上に構築されたプラグインまたはフレームワーク全体があります（たとえば、最近リリースされたBaseは非常に有望に見えます-ちなみに、詳しく見ることをお勧めします）。

それでも、かなり一般的なタスクが1つあります。私がまだ遭遇していない解決策は、典型的な自律UI要素を作成することです。 プロジェクトで日付ピッカーを使用し、それを作成するには、githubの広大な領域で見つかったjQueryプラグインを使用するとします。 この最後のものでは、対応する入力がページに表示されるたびに手動でプルする必要があることを除いて、すべてが問題ありません。さらに、競合を避けるために、それによって作成されたマークアップをクリーンアップすることもできます。 その結果、多くの反復コードを作成する必要があります。 これは、Backbone.Componentが便利な場所です。

使用する

Backbone.Componentの背後にある考え方は、WebコンポーネントとEmber.jsのコンポーネントに非常に似ています。 各コンポーネントは、独自のマークアップとロジックを持つ分離されたUI要素です。

コンポーネント宣言

独自のコンポーネントを作成するには、Backbone.Componentから継承したクラスを宣言し、その中の3つのメソッドをオーバーライドする必要があります。

Backbone.Components.MyDate = Bakcbone.Component.extend( { generate: function( ) { ... }, activate: function( ) { ... }, deactivate: function( ) { ... } } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

順番に：

• generateは、マークアップを作成するためのメソッドです。 必要なパラメータを受け取ることができ、文字列（生成されたHTML）を返す必要があります。
• activate-コンポーネントのアクティベーションコード。 メソッドはパラメーターを受け取らず、値を返しません。 日付の例では、次のようになります。

    activate: function( ) { this.$( "input" ).datepicker( ); }
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

• deactivate-必要に応じて、コンポーネントの非アクティブ化コード。 また、パラメーターを受け取らず、値を返しません。

テンプレートで使用する

以上です。 テンプレートで、次の構文を使用してコンポーネントをレンダリングできます。

 <%= this.insertMyDate( ) %>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、テンプレート内のこれがビューオブジェクトを指していることを前提としています。 insertMyDateメソッドは、Backbone.Componentの初期化時にViewクラスに自動的に追加されました（詳細についてはドキュメントを参照してください）。そのようなメソッドは宣言した各コンポーネントに対して作成されます。 insert ...メソッドに渡されるすべてのパラメーターは、対応するコンポーネントのgenerateメソッドを変更せずにリダイレクトされます。

レンダリングされたコンポーネントがページに表示されるとすぐに、アクティブ化メソッドが呼び出され、ページから消えると、非アクティブ化されます。 これで、プロジェクトの任意の場所で日付ピッカーを使用して、その初期化と初期化解除を気にせずに使用できます。テンプレートに描画するだけです。

レンダリングせずに使用

おそらく、使用するコンポーネントには、テンプレートに取り込むことができる固定マークアップがありません。 たとえば、.my-scrollbarクラスを持つすべての要素に適用する必要があるカスタムスクロールバーがあります。 この場合、generateメソッドを使用せずにMyScrollbarコンポーネントのクラスを作成する必要があり、ビューオブジェクト内（たとえば、initializeメソッドが適切）で次の呼び出しを行います。

 this.observeMyScrollbar( ".my-scrollbar" );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

前の例のinsertMyDateメソッドと同様に、observeMyScrollbarメソッドは自動的に生成されました。 入力としてCSSセレクターを受け入れます。 これで、my-scrollbarクラスを持つ要素が画面に表示されると、コンポーネントのactivateメソッドが呼び出され、消えた場合はdeactivateと呼ばれます。 同じセレクターに対してメソッドを再度呼び出しても効果はありません。そのため、observメソッドが何回呼び出されるかを心配する必要はありません。

インストール、ドキュメント、依存関係

githubのプロジェクトリポジトリ：

https://github.com/malroc/backbone-component

そこで、より詳細なドキュメントを見つけることができます。

Backbone.ComponentはBowerで、backbone_componentという名前で入手できます。 Bowerを使用する場合、bashコンソールからBackbone.Componentをインストールできます。

 bower install backbone_component
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または、プロジェクトの依存関係にbackbone_componentを記述します。

プラグインの外部依存関係は、実際にはBackboneとUnderscoreの2つだけです（後者はBackbone自体のハードな依存関係です）。 jQuery / Zepto /他のものは使用できませんが、Backboneと同様に、DOMを操作するための便利な方法の一部を失います（ドキュメントを参照）。

さらに、Backbone.ComponentはMutationObserverを使用して構築されます。 実装されていないブラウザをサポートする予定の場合（現時点では11未満のすべてのIEバージョンです）、ポリファイルを使用する必要があります（ たとえば ）。

フィードバック

プラグインは最近登場したため、バグや欠点が含まれている可能性があります。 そのようなメッセージ、特に修正を伴うプルリクエストは、プロジェクトリポジトリで感謝の気持ちで受け取られます。 唯一の要求：英語を使用し、オープンソースコミュニティを尊重します。

もちろん、ここにコメントを書くことができます。

ご覧いただきありがとうございます。 このプラグインが、複雑なWebアプリケーションを開発するという彼の困難なタスクで誰かを助けることを願っています。