视图中的 EmberJs {{ action }} 助手不起作用

Question

我正在尝试在我的 ember 应用中添加引导模式。我希望能够使用指定的模板添加模式并能够处理操作。我无法让它工作。模态出现，我的控制器的属性已绑定，但我无法处理操作。我不明白为什么。我真的很希望能够从我的控制器中的任何地方触发模态并在它们上绑定操作。

我的观点是这样的：

App.ModalView = Ember.View.extend({
    classNames:         ['modal fade'],
    attributeBindings:  ['role'],
    role:               'dialog',

    didInsertElement: function() {
        this._super();
        this.$().modal();
        this.$().on('hidden.bs.modal', this.close.bind(this));
    },
    close: function(event) {
        return this.destroy();
    }
});

我在随机控制器中这样实例化它：

var modal = controller.container.lookup('view:modal');
modal.reopen({
    controller:     this,
    targetObject:   this,
    templateName:   'mymodal'
});

return modal.appendTo('body');

我的模板如下所示：

<div class="modal-dialog">
   <div class="modal-content">
      <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
         <h4 class="modal-title">My Modal Title</h4>
      </div>
      <div class="modal-body">
        <div class="row">
           <div class="col-md-12">
               My modal content
           </div>
        </div>
      </div>
      <div class="modal-footer">
         <button type="button" data-dismiss="modal" class="btn default">Close</button>
         <button type="button" class="btn green" {{ action "myaction"}}>My Button with an action</button>
      </div>
   </div>
</div>

如果我尝试显示一些控制器属性，它会起作用。但是当我单击带有“myaction”操作的按钮时，什么也没有发生。也许我对在我的应用程序中处理模式的方式完全错误（我在 Ember 的世界中很新）。 我正在使用最后一个版本的 ember (1.1.1) 和 bootstrap 3。

谢谢，

Vinc

Answer 1

我想通了。事实上，我的应用程序正在运行到一个特定的 dom 元素 (#app)。当我将视图添加到正文时，我的模式被添加到我的应用程序“外部”！所以，事件的冒泡链被打破了。我没有将视图添加到正文中，而是将其添加到我的应用程序根元素中，现在一切正常！

Answer 2

模态方法很有可能将其与主体断开连接，这会破坏您的操作。

另请参阅：Ember.js and Foundation 4 modal window

Answer 3

你不应该像这样访问视图

var modal = controller.container.lookup('view:modal');

见 Wycats 评论 here。

或者，This answer 可以帮助您实例化模态