CODEWITHSUNDEEP
twitter-bootstrapember.js
izbz
izbz

Reputation: 93

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?

Upvotes: 1

Views: 2058

Answers (2)

Matteo Rossi
Matteo Rossi

Reputation: 169

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)

Upvotes: 3

Marcio Junior
Marcio Junior

Reputation: 19128

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/

Upvotes: 2

Related Questions