Ember.js 余烬在新元素上插入元素

Ember.js 余烬在新元素上插入元素,ember.js,Ember.js,我有一个主题列表,它在页面加载时接收引导弹出事件 但当我在不重新加载页面的情况下将新主题添加到此列表时,我无法将popover事件绑定到此新主题中 我的代码是这样组织的: 论坛路线: export default Ember.Route.extend({ model: function() { return Ember.RSVP.hash({ run: this.store.find('run', this.modelFor('dialogo.admin.manager'

我有一个主题列表,它在页面加载时接收引导弹出事件

但当我在不重新加载页面的情况下将新主题添加到此列表时,我无法将popover事件绑定到此新主题中

我的代码是这样组织的:

论坛路线:

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);
  }
});
论坛管理员:

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();
    }
  }
});
论坛观点:

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();
      }
    });
  }
});
论坛模板:

  <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>

{{{#模型中的每个主题}
{{topic.id}
{{topic.content}
{{topic.posts.length}
0
德尔
|
编辑|
悬赏|
摩登派青年
你是说你的名字是什么?
Essa açãonão poderáser desfeita。


模拟| Não {{else} 尼纳姆·托皮科·恩孔塔多。。。 {{/每个}}
所以,当我执行saveNewTopic并将这个新主题添加到topicList时,我丢失了popover事件


有人知道如何将我的popover事件绑定到新的主题实例上吗?

您可以参考ember cookbook,了解如何处理引导式popover,最好的方法是创建组件或使用操作从路由器渲染

在main application.hbs中,您需要添加弹出式插座

<setion id="main-content">
  {{ outlet }}
</section>

<section id="footer-scroll">
    {{partial "partials/footer"}}
</section>

{{outlet 'popup'}}

{{outlet}}
{{partial“partials/footer”}
{{outlet'popup'}}
你会像这样触发显示弹出事件

<a href="#" {{action 'showPopUp' 'select-country-pop' this}} class="cl-7 footer-text-desk ft-w-600">

在你的论坛模板中,你可以用同样的方式使用它

<button class="btn btn-default" type="button" data-del="{{topic.id}}" title="ATENÇÃO: Deletar tópico" {{action 'showPopUp' 'popuptemplate' this}}>
        DEL
      </button>

德尔
  • 你需要创建弹出式模板,为了你的理智,如果你创建一个组件会更容易
  • “this”仅仅意味着它将从您的模型继承数据

您基本上需要为包含popover的元素创建一个组件或视图,并在
didInsertElement
@code jaff中初始化,是的,在阅读了abFx的建议后,我可以解决这个问题!但也谢谢你=D
<button class="btn btn-default" type="button" data-del="{{topic.id}}" title="ATENÇÃO: Deletar tópico" {{action 'showPopUp' 'popuptemplate' this}}>
        DEL
      </button>