I have a list of topics that gets the bootstrap popover event on page load.
But when I add new threads to this list without reloading the page I can not bind the popover in the new thread.
My code is currently organized as follows:
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 run the saveNewTopic function and add a new topic to the "topicList" list, I lose my popover event.
I searched a lot about this but could not find a solution ...
Anyone have any clues on how to bind the popover event in new topic instances?
Thank you in advance!