Question

所以我有这个问题，即使在我摧毁它之后，Ember也不会多次呈现我的观点。

我拥有的代码在不使用组件的情况下工作，因此实际视图可能没有被正确销毁，这可能是一些问题。

我在ApplicationRoute

中渲染到了一个插座

App.ApplicationRoute = Em.Route.extend({
  actions: {
    showModal: function() {

      // This does not work the second time:
      this.render('modal', {
        into: 'application',
        outlet: 'modal'
      });

    }
  }
});

我为隐藏Bootstrap模式时设置了一个事件监听器

App.BaseModalComponent = Em.Component.extend({
  afterRenderEvent: function() {
    var self = this;
    this.$('.modal')
        .on('hidden.bs.modal', function(){

          // I am destroying the component, 
          // when the modal is hidden
          self.destroy();

        })
        .modal();
  }
});

afterRenderEvent是我附加到视图afterRender事件的监听器。

请参阅此处了解标记等：http://emberjs.jsbin.com/wolicutiwiro/1/edit

不使用组件的工作示例：http://emberjs.jsbin.com/lodamojikaqo/1/edit

Answer 1

Check this JSBin它可以满足您的需求。

App.ApplicationRoute = Em.Route.extend({
    actions: {
        showModal: function() {

          // This does not work the second time:
          this.render('modal', {
            into: 'application',
            outlet: 'modal'
          });

        },
        closeModal: function() {
            console.log("closing modal");
            return this.disconnectOutlet({
              outlet: 'modal',
              parentView: 'application'
            });
        }   
     }  
});

我认为主要的挑战是我无法调用closeModal动作从我的模态视图中的按钮。 Bootstrap本身处理隐藏莫代尔，但我需要断开插座以允许相同或另一个要渲染的模态。

要从组件中调用此操作，您必须将操作从组件发送到控制器当前模板控制器：

App.BaseModalComponent = Em.Component.extend({
  afterRenderEvent: function() {
    var self = this;
    this.$('.modal')
        .on('hidden.bs.modal', function(){

          self.sendAction('action');

        })
        .modal();
  },
});

使用组件时，请务必指定操作名称：

  <script type="text/x-handlebars" data-template-name="modal">
    {{#base-modal action='closeModal'}}
      <p>One fine body&hellip;</p>
    {{/base-modal}}
  </script>

动作将从控制器冒泡到路线。此解决方案允许您完全按原样使用引导程序，但我发现解决方案 Code Jack建议更多Ember。

在Ember.js中销毁后用组件重新渲染视图

1 个答案: