3

我想将 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 新手，不确定我是否了解如何将数据注入视图？

4

1 回答 1

2

你有两个让你慢下来的问题。

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

我建议将您更改ApplicationRoute为这样（使用actions而不是，events并且只是路线）：transitionTo'groups'

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

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

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

于 2013-10-04T17:29:27.757 回答