4

我能够获得一个很好的引导模式来正确显示/隐藏并显示存储在模式控制器上的消息，如下所示： Ember Bootstrap Modal Example

相关代码{

// context
<script type="text/x-handlebars" data-template-name="application"> 
  <div class="container">
    {{outlet}}
  </div>
  <div id="modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="ariaLabel" aria-hidden="true">
    {{render "modal"}}
  </div>
</script>

// modal template
<script type="text/x-handlebars" data-template-name="modal">
  <div class="modal-header"> 
    <h2>{{title}}</h2> 
  </div>
  <div class="modal-body"> 
    <h4>{{{msg}}}</h4>
  </div>
  <div class="modal-footer">
    <div class="span3 pull-right">
      <button 
        id="modalBtn" data-dismiss="modal" aria-hidden="true" style="vertical-align:bottom"
        {{bindAttr class=":btn :btn-large :btn-block isCorrect:btn-success:btn-danger" }} 
        {{action "callback"}}>
        {{btn}}
      </button>
    </div>
  </div>
</script>

// controllers
App.HomeController = Ember.Controller.extend({
  needs: ['modal'],

  showModal: function(){
    var modCon = this.get('controllers.modal');

    if( modCon.get('isCorrect') ){ // some logic
      modCon.setProperties({
        title: 'Correct',
        msg: 'You get points',
        btn: 'Next'
      });
    }
    else{
      modCon.setProperties({
        title: 'Incorrect',
        msg: 'Please try again',
        btn: 'Close'
      });
    }
    $('#modal').modal(); // show
  }
});

App.ModalController = Ember.Controller.extend({
  isCorrect: true,
  title: 'modCon title',
  msg: 'modCon message',
  btn: 'modCon btn label',
  callback: function(){
     alert('modal controller caught action');
  }
});

我在这里发布这个有两个原因：

  1. 我做对了吗？使用 Ember 可能很难理解开发人员打算如何完成某些事情。
  2. 如果其他人可以帮助改进/验证它的有效性，那么它可以作为那些希望在 Ember.js 中实现 Bootstrap modals 的示例
4

4 回答 4

3

看看Ember for Bootstrap，它有一种在 Ember 中使用 Bootstrap 模态的简单而强大的方法：

模态演示：http ://ember-addons.github.io/bootstrap-for-ember/#/show_components/modal

GitHub 仓库：https ://github.com/bootstrap-for-ember/bootstrap-for-ember

于 2013-09-03T00:13:29.717 回答
1

这是做你想做的另一种方式。

我所做的是有这样的模态：

<!-- modal edit dialog -->
<div class="modal hide fade" tabindex="-1" id="editView">
        {{view MainApp.ModalContainerView elementId="modalContainerView"}}
</div>

其中“MainApp.ModalContainerView”是一个容器视图。然后，当我想为模型渲染/显示任何模板时，我这样做了：

        var containerView = Em.View.views['modalContainerView']; 
        if(containerView == undefined)
            return;
        var temp =  containerView.toArray(); 
        if(temp.length > 0)
            containerView.removeAllChildren();
        containerView.addObject(view);

“视图”是您要在模式中显示的视图。请注意，我正在删除“modalContainerView”中的最后一个视图，以确保该容器中没有任何视图。

最后我只需要显示模态：

$('#editView').modal({
            show : true,
            keyboard : true,
            resizeToFit : true
});

我希望这可以帮助你。

华尼托斯

于 2013-06-02T09:42:14.347 回答
1

对于 Ember CLI 用户，这里有一些更新的方法/链接更新：

https://github.com/mattbeedle/ember-cli-bootstrap-modal-example

http://indexiatech.github.io/ember-components/#/overview

于 2014-12-02T21:44:06.543 回答
0

很多时候，我将 modal 用作具有自己的路由和控制器的单独模板，因为我的应用程序中的 modal 非常强大并且需要为多个 ajax 调用提供服务。

于 2015-08-10T02:41:18.047 回答