Question

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

我的观点如下：

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可以帮助您实例化模态

视图中的EmberJs {{action}}帮助程序不起作用

3 个答案: