Ember didInsertElement on new elements - ember.js

Question

I have a topic list that receive a bootstrap popover event on page load.
But when I add new topics to this list without reload page I can't bind popover event in this new topic.
My code is organized in this way:
Forum route:
export default Ember.Route.extend({
model: function() {
return Ember.RSVP.hash({
run: this.store.find('run', this.modelFor('dialogo.admin.manager').get('id')),
topics: this.store.find('topic', { run: this.modelFor('dialogo.admin.manager').get('id') })
});
},
setupController: function (controller, model) {
controller.set('runID', this.modelFor('dialogo.admin.manager').get('id'));
controller.set('model', model.topics);
controller.set('currentRun', model.run);
}
});
Forum Controller:
export default Ember.Controller.extend({
needs: ['application'],
activeUser: Ember.computed.alias("controllers.application.model"),
actions: {
createTopic: function() {
var
store = this.get('store'),
user = this.get('activeUser'),
run = this.get('currentRun'),
topic;
topic = store.createRecord('topic', {
content: '',
run: run,
moderator: user
});
this.set('newTopic', topic);
},
saveNewTopic: function() {
var newTopic = this.get('newTopic');
var topicList = this.get('model');
newTopic.save().then(function(topic){
topicList.pushObject(topic);
Ember.$('#newTopic').modal('hide');
});
},
deleteTopic: function (topic) {
topic.destroyRecord();
}
}
});
Forum View:
export default Ember.View.extend({
didInsertElement: function() {
this.$('[data-toggle="popover"]').popover({
html : true,
content: function() {
var delID = Ember.$(this).attr('data-del');
return Ember.$('#alertDel' + delID).html();
}
});
}
});
Forum Template:
<tbody>
{{#each topic in model}}
<tr>
<th scope="row">{{topic.id}}</th>
<td>{{topic.content}}</td>
<td>{{topic.posts.length}}</td>
<td>0</td>
<td>
<button class="btn btn-default" type="button" data-toggle="popover" data-placement="top" data-trigger="focus" data-del="{{topic.id}}" title="ATENÇÃO: Deletar tópico">
DEL
</button> |
<span>EDIT</span> |
<span>PEND</span> |
<span>MOD</span>
<div id="alertDel{{topic.id}}" style="display: none;">
Você deseja deletar o tópico #ID {{topic.id}}?
Essa ação não poderá ser desfeita.
<br><br>
<button class="btn btn-danger" {{action 'deleteTopic' topic}}>Sim</button> |
<button class="btn btn-default">Não</button>
</div>
</td>
</tr>
{{else}}
<tr>
<td rowspan="5">Nenhum tópico encontrado...</td>
</tr>
{{/each}}
</tbody>
So, when I execute saveNewTopic and add this new topic to topicList, I lost my popover event.
Anyone have a clue about how can I bind my popover event on new topic instances?

Answer 1

You can refer to ember cookbook on how to handle bootstrap pop over, which the best way would be creating a component or rendering from router with an action.
http://guides.emberjs.com/v1.10.0/cookbook/user_interface_and_interaction/using_modal_dialogs/
App.ApplicationRoute = Ember.Route.extend({
actions: {
showPopUp: function(name, content){
//the controller for will help you let you access the content from your controller (if using a component)
this.controllerFor(name).set('content', content);
this.render(name, {
into: 'application',
outlet: 'popup'
});
},
removePop: function(){
this.disconnectOutlet({
outlet: 'popup',
parentView: 'application'
});
}
}
}
});
In your main application.hbs you need to add the pop up outlet
<setion id="main-content">
{{ outlet }}
</section>
<section id="footer-scroll">
{{partial "partials/footer"}}
</section>
{{outlet 'popup'}}
You would trigger the show pop up event like this
<a href="#" {{action 'showPopUp' 'select-country-pop' this}} class="cl-7 footer-text-desk ft-w-600">
In your forum template you can use it the same way
<button class="btn btn-default" type="button" data-del="{{topic.id}}" title="ATENÇÃO: Deletar tópico" {{action 'showPopUp' 'popuptemplate' this}}>
DEL
</button>
You need to create the pop up template, for your sanity it would be easier if you create a component
"this", just means it would inherit the data from your model