在Ember.js中创建弹出模板

Question

我正在(试图)构建我的第一个成员应用程序。我有两个模板，用户和用户/编辑如下-

<script type = "text/x-handlebars" id = "user">
<div class="user-profile">
 {{#if deleteMode}}
            <div class="confirm-box">
                <h5>Really?</h5>
                <button {{action "confirmDelete"}}> yes </button>
                <button {{action "cancelDelete"}}> no </button>
            </div>
            {{/if}}
<button {{action "edit"}}>Edit</button>
<button {{action "delete"}}>Delete</button>
  <img {{bind-attr src="avatarUrl"}} alt="User's avatar" />
  <h2>{{name}}</h2>
  <span>{{email}}</span>
  <p>{{bio}}</p>
  <span>Created {{creationDate}}</span>
</div>

{{outlet}}

</script>

<script type = "text/x-handlebars" id = "user/edit">

<div class="input-group">
<div class="user-edit">
  <h4>New Agent</h5>
  <h5>Agent Avatar</h5>
  {{input value=avatarUrl}}

  <h5>User name</h5>
  {{input value=name}}

  <h5>User email</h5>
  {{input value=email}}

  <h5>User short bio</h5>
  {{textarea value=bio}}
</div>
<button {{action "save"}}> Save </button>
</div>
</script>

用户模板具有{outlet}，在其中调用用户/编辑模板时会显示该模板。但是，我想让用户/编辑模板弹出，而不是仅仅出现在同一个页面上。我一直试图使用引导模式这样做，但没有取得很大的成功，因为我无法弄清楚物流。有没有人有更好的建议或者做这件事的方法？非常新的网页开发，所以尽量简单，请。

Answer 1

几天前，我也做了同样的事情，然后通过做下面的工作，我得到了引导模式。我不知道这是否是一个好办法，但它做了我的工作。我是相当新的成员以及，所以请放心，科雷特我。

由于您没有提供更多的代码，所以请更改以下内容以满足您的需要。

在路由器中，捕获edit操作并将您的Modal-模板呈现到您想要的模板中。这可能看起来像这样。

App.UserRoute = Ember.Route.extend({

    actions: {
    edit: function() {
      return this.render('editmodal', { into: 'user', outlet: 'md' });
    },

    close: function() {
      return this.render('nothing', { into: 'user', outlet: 'md' });
   }    
}

});

单击“关闭”，它将nothing呈现到模板中(因为您希望关闭它)。

将表单数据放入编辑模式中。让它成为一个靴带模态。我只是把它写在草稿里，我想你得把它修好才行。

<script type = "text/x-handlebars" id = "editmodal">

<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="input-group">
<div class="user-edit">
  <h4>New Agent</h5>
  <h5>Agent Avatar</h5>
  {{input value=avatarUrl}}

  <h5>User name</h5>
  {{input value=name}}

  <h5>User email</h5>
  {{input value=email}}

  <h5>User short bio</h5>
  {{textarea value=bio}}
</div>
<button {{action "save"}}> Save </button>
</div>
</div>
</div>
</div>
</script>

您还需要一个视图，这个视图可能如下所示：

App.EditmodalView = Ember.View.extend({ 
    didInsertElement: function() {
    var view;
    this.$('.modal').modal('show');
    view = this;
    return this.$('.modal').on("hidden.bs.modal", function(ev) {
      view.controller.send('close');
    });
  },

  layoutName: 'modal_layout',
  actions: {
    close: function() {
      this.$('.modal').modal('hide');
    }
  }

});

如您所见，我们在这里引用的是一个layoutName。通过这样做，您可以重用布局。您也可以让它成为，并将所有的东西放在一个模板中，但我喜欢它的可重用性。您的布局如下所示：

<script type = "text/x-handlebars" id = "modal_layout">
<div class="modal fade" role="dialog">{{yield}}</div>
</script>

在同样的尝试中，考虑一下nothing模板，一旦关闭模式，它就会在模板中呈现。

<script type = "text/x-handlebars" id = "nothing">
</script>

在您的User模板中，我刚刚向您的插座添加了一个名称。

<script type = "text/x-handlebars" id = "user">
<div class="user-profile">
 {{#if deleteMode}}
            <div class="confirm-box">
                <h5>Really?</h5>
                <button {{action "confirmDelete"}}> yes </button>
                <button {{action "cancelDelete"}}> no </button>
            </div>
            {{/if}}
<button {{action "edit"}}>Edit</button>
<button {{action "delete"}}>Delete</button>
  <img {{bind-attr src="avatarUrl"}} alt="User's avatar" />
  <h2>{{name}}</h2>
  <span>{{email}}</span>
  <p>{{bio}}</p>
  <span>Created {{creationDate}}</span>
</div>

{{outlet md}}

</script>

我在这里没有写的是在你的模式中处理你的保存事件。

希望这能帮你走。作为一个初学者，我知道Ember如何才能成为一项艰巨的任务。顺便说一句，我想我看到了一个关于同一个问题的很好的帖子，当我找到它的时候，我会把它发到这里。