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

作業を遅らせている問題が 2 つあります。

まず、'groups'テンプレートが DOM に挿入されることはありません。 this.container.lookup('view:groups').append()あなたが思っていることをしません。Ember Way (tm) は、outletネストされたテンプレートをレンダリングするために を使用することであり、モーダルは実際にはネストの特殊なケースです。(Ember インスペクタのビュー ツリーを使用して、'groups'テンプレートが挿入されていないことを確認できます。)

your を次のように変更することをお勧めしますApplicationRoute(actionsの代わりに、ルートeventsだけを使用します):transitionTo'groups'

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

この時点で、'groups'テンプレートが DOM に組み込まれていることがわかりますが、まだ表示されていません。これは、モーダル内にモーダルがあるという 2 番目の問題によるものです (よぉ!)。あなたGroupsViewは新しい要素を作成し、新しい要素のクラス名を設定modalしfadeています。テンプレートgroupsはその要素にレンダリングされていますが、テンプレートの外側の div にgroupsは と のクラス名がmodalありfadeます。(によって作成された) 外側のモーダルGroupsViewは「表示」されていますが、(modal fadeクラスのために) 明示的に非表示になっているコンテンツが含まれているため、画面には何も表示されません。テンプレートの外側の div を削除するか、からクラス名を削除してからGroupsView、モーダルを で表示できますthis.$('#favoritesModal').modal('show')。

これが実際の JSBin です: http://jsbin.com/ucanam/1311/edit

于 2013-10-04T17:29:27.757 に答える