2016-04-06 8 views
0

私は画像ギャラリーの束を持ったページを持っています。各ギャラリーには、このようなメニューリンクを介してアクセス可能である:流星テンプレート - コードの冗長性を避けるためにイベントを継承またはアウトソース

​​

各ギャラリーは、前方クリックのような独自の機能が、特定の機能を持っており、彼らが共有bardwardクリックしてください。 FlowRouter各ギャラリーがレイアウトでレンダリングされると

Gallery_Layout.html 
Gallery_Layout.js 
Gallery1.html 
Gallery1.js 
Gallery2.html 
Gallery2.js 
Gallery3.html 
Gallery3.js 

ファイル構造は、このようなものです。

Gallery1.js:

Template.gallery1.events({ 
    'click .btn-backward' (event, template) { 
     // show last picture 
    }, 
    'click .btn-forward' (event, template) { 
      // show next picture 
    } 
}); 

Gallery2.js:

Template.gallery2.events({ 
    'click .btn-backward' (event, template) { 
     // show last picture 
    }, 
    'click .btn-forward' (event, template) { 
      // show next picture 
    } 
}); 

などなど...

瞬間 は、共有機能は、すべてのギャラリーJSファイルで重複していると述べました

これらのイベントを親テンプレート、つまりGallery_Layout.jsにアウトソースすると、動作しません。

ヘルパー私はグローバルヘルパーがあることを知っています、イベントのペンダントはありますか?

質問:テンプレートイベントを外部委託または継承して再利用可能なコンポーネントとして使用するにはどうすればよいですか?

ありがとうございます!

Template.body.events({ 

}); 

すべてのテンプレートは、本体の内側にロードされます

マフは

答えて

1

1)あなたは、本体のテンプレートを使用することができます。

2)セレクタを使用することができます。ギャラリーはすべてのギャラリーに属するHTMLクラスです。

Template.Gallery_Layout.events({ 
'click .gallery' (event, instance) { 

let gallery = event.target; 

// execute code on gallery. 


} 

}); 
関連する問題