Question

我（尝试）构建我的第一个ember应用程序。我有两个模板，用户和用户/编辑如下 -

<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}，调用时会显示用户/编辑模板。但是，我想让用户/编辑模板弹出，而不是只显示在同一页面上。我一直在尝试使用自举模式这样做但是没有太大的成功，因为我无法弄清楚物流。有没有人有更好的建议或这样做的方法？对于web开发者来说非常新，请尽可能简单。

Answer 1

几天前我做了同样的事情，我通过执行以下操作让Bootstrap Modals工作。我不知道这是不是一个好方法，但它确实适合我。我也很贪图，所以请随意纠正我。

由于您未提供更多代码，请更改以下内容，以满足您的需求。

在路由器中，捕获edit操作并将模板模板渲染到所需的模板中。这可能看起来像这样。

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呈现到模板中（因为您要关闭它）

将表单数据放入editmodal中。使它成为Bootstrap模态。我只是把它复制到我的草稿中，我认为你必须修复它才能使它工作。

<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真的是一项艰巨的任务。顺便说一句：我觉得我看到了一个关于同一问题的好线程，当我找到它时，我会在这里发布

在Ember.js中制作弹出模板

1 个答案: