Javascript 带Ember.js的Bootstrap 3模式，模式中没有数据

我想使用Bootstrap3的modal和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>

&我的最爱
&你好，用户




>
&时代；
我最喜欢的团体
{{{#每个模型}
{{呈现“组”此}
{{/每个}}
创建新组
{{name}}

---

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

您有两个问题使您的速度变慢

首先，您的

“组”

模板永远不会插入到DOM中

this.container.lookup（'view:groups'）.append（）

并不像您想象的那样。Ember Way（tm）是使用

outlet

来呈现嵌套模板，而modal实际上只是嵌套的一种特殊情况。（您可以使用余烬检查器的视图树查看从不插入

“组”

模板。）

我建议将您的

应用程序路径更改为这样（使用
操作
而不是
事件
，只需
转换到
组
路径）：

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

这是一个有效的JSBin:
你能把一个JSFIDLE放在一起吗？如果下面的答案不正确，我会的。啊，对不起，我没有看到。
App.ApplicationRoute = Ember.Route.extend({
    actions: {
        showGroups: function() {
          this.transitionTo('groups');
        }
    }
});