Bootstrap 3 Modal with Ember.js，没有模态数据

Question

我想使用Bootstrap 3的模态和Ember.js。 到目前为止，我还没有成功。 虽然屏幕正在消失，但数据模式本身并未出现。 我的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',
    },
];

我的模板：

<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>

我怎样才能做到这一点？ 我是Ember的新手，不知道我是否理解如何将数据注入到视图中？

Answer 1

你有两个问题会减慢你的速度。

首先，您的'groups'模板永远不会插入到DOM中。 this.container.lookup('view:groups').append()不会做你认为它做的事情。 Ember Way（tm）是使用outlet来渲染嵌套模板，而模态实际上只是嵌套的特例。 （您可以使用Ember检查器的视图树来查看永远不会插入'groups'模板。）

我建议将ApplicationRoute更改为此（使用actions而不是events ，只需transitionTo到'groups'路径）：

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

此时你应该看到'groups'模板正在进入DOM，但它仍未显示。 这是由于第二个问题，即你在模态中有一个模态（哟dawg！）。 您的GroupsView正在创建一个新元素，并在新元素上设置modal和fade类名。 您的groups模板正在渲染到该元素中，但groups模板中的外部div具有modal和fade的类名。 外部模态（由GroupsView创建）正在“显示”，但由于它包含显式隐藏的内容（由于modal fade类），因此屏幕上不显示任何内容。 您可以删除模板中的外部div，或从GroupsView删除类名，然后使用this.$('#favoritesModal').modal('show')显示模式this.$('#favoritesModal').modal('show') 。

这是一个有效的JSBin： http ： //jsbin.com/ucanam/1311/edit