javascript - Making divs clickable - Ember view for action on multiple elements -

i developing cordova application ember. have many dynamic elements in application. these bootstrap thumbnails link other routes when clicked.

i want make these thumbnails clickable. if use views, have write unique views thumbnails.

i have heard mixins. can general view defined :

1. pass model
2. render template route model

in other words, since each view semantically performs same action, want able similar to

{{#each}}   {{#view app.allview this}}    .   {{/view}} {{/each}} 

in template , in view :

app.allview = ember.view.extend({   click: function(evt, model){       this.controllerfor('route').set('content', model);       this.transitionto('route');   } }); 

update

following @givanse's answer, made following component

<script type="text/x-handlebars" data-template-name="components/thumbnail-view">   <div {{bind-attr class=class}}>     <div class="thumbnail">       <div class="caption">         {{name}}       </div>       <img {{bind-attr src=image }}>     </div>   </div> </script> 

and used in template :

<script type="text/x-handlebars" data-template-name="types">   <div class="row">     {{#each model}}     {{thumbnail-view action="gotocategory" class="col-xs-12" param=this name=name image=image}}     {{/each}}   </div> </script> 

with ember component :

pioneer.thumbnailviewcomponent = ember.component.extend({   click: function(){     this.sendaction('action', this.get('param'));   } }); 

the action gotocategory defined in applicationroute

hope helps someone!

what need components, like:

<script data-template-name="index">   {{#each}}     {{img-thumbnail imgid="id/path/name"}}   {{/each}} </script>  <script data-template-name="components/img-thumbnail">   {{! whatever need make thumbnail }} </script>  app.imgthumbnailcomponent = ember.component.extend({   // handle events, classes, etc. }); 

see:

http://emberjs.com/guides/components/

http://emberjs.com/api/classes/ember.component.html