Bootstrap 3 Modal with Ember.js, no data in modal

Question

I want to use Bootstrap 3's modal along with Ember.js. So far, I have been unsucessfull. The data modal itself is not appearing, although the screen is doing the fade. my app.js:

App = Ember.Application.create();

App.ApplicationRoute = Ember.Route.extend({
    events: {
        showGroups: function() {
            this.container.lookup('view:groups').append();
        }
    }
});

App.GroupsRoute = Ember.Route.extend({
    model: function() {
        return groups;
    }
});

App.GroupsView = Ember.View.extend({
    templateName: "groups",
    classNames: ["modal", "fade"],
    didInsertElement: function() {
        this.$().modal('show');
        this.$().one("hidden", this._viewDidHide);
    },
    // modal dismissed by example clicked in X, make sure the modal view is destroyed
    _viewDidHide: function() {
        if (!this.isDestroyed) {
            this.destroy();
        }
    },
    // here we click in close button so _viewDidHide is called
    close: function() {        
        this.$(".close").click();
    }
});

var groups = [
    {
        id: 1,
        name: 'Family Reunion',
    },
    {
        id: 2,
        name: 'California Trip',
    },
    {
        id: 3,
        name: 'Dream Vacations',
    },
    {
        id: 4,
        name: 'Fun for Kids',
    },
];

My templates:

<script type="text/x-handlebars" data-template-name="application">
        <button class="btn actionBtn userControls" {{action showGroups}}><span class="glyphicon glyphicon-heart"></span> &nbsp My Favorites</button>
          <!-- Split button -->
          <div class="btn-group">
            <button type="button" class="btn secondaryBtn userControls"><span class="glyphicon glyphicon-user"></span>  &nbsp Hello, <b>User</b></button>
            <button type="button" class="btn secondaryBtn dropdown-toggle userControls" data-toggle="dropdown">
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu secondaryMenu" role="menu">
              <li><a href="#">Account Settings</a></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </div>
          </script>

<script type="text/x-handlebars" data-template-name="groups">>
      <div class="modal fade" id="favoritesModal">
        <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 tertiaryHeading">My Favorite Groups</h4>
            </div>
            <div class="modal-body">
              {{#each model}}
                {{render "group" this}}
              {{/each}}
            </div>    

            <div class="modal-footer">
              <button type="button" class="btn actionBtn">Create New Group</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
      </script>

<script type="text/x-handlebars" data-template-name="group">
      <button class="btn secondaryBtn groupBtn">{{name}}</button>
</script>

How can I make this work? I'm new to Ember, and not sure if I understand how to inject data into a view?

Answer 1

You have two issues that are slowing you down.

First, your 'groups' template is never being inserted into the DOM. this.container.lookup('view:groups').append() does not do what you seem to think it does. The Ember Way (tm) is to use an outlet for rendering nested templates, and modals are really just a special case of nesting. (You can use the View Tree of the Ember inspector to see that the 'groups' template is never inserted.)

I would recommend altering your ApplicationRoute to be this (use actions instead of events , and just transitionTo the 'groups' route):

App.ApplicationRoute = Ember.Route.extend({
    actions: {
        showGroups: function() {
          this.transitionTo('groups');
        }
    }
});

At this point you should see that the 'groups' template is making it into the DOM, but it's still not being shown. This is due to the second issue, which is that you have a modal inside a modal (yo dawg!). Your GroupsView is creating a new element and setting class names of modal and fade on the new element. Your groups template is being rendered into that element, but the outer div in your groups template has the class names of modal and fade . The outer modal (created by GroupsView ) is being "displayed", but since it contains content that is explicitly hidden (due to the modal fade classes) nothing is shown on screen. You could either remove the outer div in your template, or remove the class names from GroupsView , and then display the modal with this.$('#favoritesModal').modal('show') .

Here's a working JSBin : http://jsbin.com/ucanam/1311/edit