Bootstrap 3 modal pattern with Ember.js

问题

Here is what I'm trying to base my code on (based on Bootstrap ~2):

http://jsfiddle.net/marciojunior/tK3rX/

<script type="text/x-handlebars" data-template-name="application">
    <h1>Boostrap modal sample</h1>    
    <a {{action showModal}} href="#">Open modal</a>
</script>

<script type="text/x-handlebars" data-template-name="modal">
<!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">{{view.title}}</h4>
        </div>
        <div class="modal-body">
          <p>{{view.content}}</p>
        </div>
        <div class="modal-footer">
          <button type="button" {{action close target="view"}} class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</script>

And this is my jsfiddle with Bootstrap 3:

http://jsfiddle.net/5R8U9/9/

Could anyone help me find the problem with my fiddle?

回答1:

Your problem is with css:

In your ModelView you have classNames: ["modal", "fade", "hide"],. You must remove the hide class.

In the template you have another problem. Your are using the modal and fade again. Since you have specified it already in ModelView, this is unnecessary.

Template

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Becaues when the view is created the result will be 2 modal classes and the layout will be broken:

<div class="modal fade ember-view" >
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

The final result is this http://jsfiddle.net/marciojunior/rrXc2/

回答2:

If you're using Bootstrap 3 and Ember 1.0, in your route you should replace

App.ModalView.create({ title: "My title", content: "My content" }).append();

with

this.container.lookup('view:modal').append();

in order to avoid the defaultContainer deprecation (https://github.com/emberjs/ember.js/issues/2597)

来源：https://stackoverflow.com/questions/18381298/bootstrap-3-modal-pattern-with-ember-js

标签

twitter-bootstrap

ember.js