javascript - How to bind event to dynamically created instance in ember.js -

i have created custom component contain reference view(bound handlebar template). , template has button want attach click handler it.

i create instance of component dynamically , attach different divs. problem how can hook view event handler defined in corresponding component instance.

    app.imageview = ember.view.extend({         "templatename" : "image-template",         "imagepath" : null,         "controller" : null     });      app.imageswitcher = ember.object.extend({         renderto : null,         init: function(){             this.set("view",app.imageview.create());         }         renderonscreen: function(){             this.get("view").appendto(renderto);         }         clickhandler : function(evt){         }     })  <script type="text/x-handlebars" data-template-name="image-template">     <img {{bindattr src="imagepath"}} />     <input type="button" value="change image" /> </script> 

component instance creation:

var component = app.imageswitcher.create({renderto:"#div"}); component.renderonscreen()   var component1 = app.imageswitcher.create({renderto:"#div1"}); component1.renderonscreen() 

now want buttons invoke clickhandler defined in corresponding app.imageswitcher instance. there way it. tried have reference app.imageswitcher instance within view. not clean way of doing it.

you can mixin ember.targetactionsupport view, , have click handler on that, such:

app.imageview = ember.view.extend(ember.targetactionsupport, {     templatename: "image-template",     action: "clickhandler",     imagepath: null,     controller: null,     click: function() {          this.triggeraction();     } });  app.imageswitcher = ember.object.extend({     renderto : null,     init: function(){         this.set("view",app.imageview.create({target: this));     }     renderonscreen: function(){         this.get("view").appendto(renderto);     }     clickhandler : function(evt){     } })