ember.js - Ember Dynamically Generated HTML -

i have requirement need add html after dom has been rendered. wondering if possible manipulate dom after creation , dynamically add html , specifying associated ember action.

e.g. intension of want achieve:

 $('.add').on("click", function(e){     e.preventdefault();     += 1;     var content = "<div class=\"item dodgerblue\"><h1>"+i+"</h1></div>";     var content + "{{action "owlitemclicked" titlemodel.id titlemodel.index titlemodel on="click" }}"     owl.data('owlcarousel').additem(content);   }); 

specifically want add item carousel: http://owlgraphic.com/owlcarousel/demos/manipulations.html

i'm not sure triple-stash, includes content without escaping it, work {{action}}. in case, looks me you'd better off defining html within each block , letting ember handle content addition.

{{#each model |titlemodel index|}}   <div class=\"item dodgerblue\">     <h1>{{index}}</h1>   </div>   {{action "owlitemclicked" titlemodel.id titlemodel.index titlemodel on="click" }} {{/each}} 

i noticed have titlemodel.index property, maybe don't need index in each block , can use model's property instead.

that ember way it. however, looks owlcarousel widget wants have html passed directly. there's reinit method, maybe sufficient tell new content has been added through ember. following:

carouseloptions: {   // ... },  didinsertelement: function() {   ember.run.scheduleonce('afterrender', this, function() {     var $c = ember.$('#the-carousel');     if ($c.length) {       $c.owlcarousel( this.get('carouseloptions') );     }   }); },  actions: {   addcarouselitem: function(e){     e.preventdefault();      // add new item array.     // not shown because have no idea of code.     // ember handle dom insert.     // reinit carousel.     $("#the-carousel").data('owlcarousel').reinit( this.get('carouseloptions') );   },    owlitemclicked: function(e) {     // ...   } }