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检查器的View Tree查看永远不会插入'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')显示模式。

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

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

1 个答案: