Question

我是Ember框架的新手，我有一个关于获得模态设置的问题。我有site-header作为组件。当我点击登录按钮时，我想要弹出一个模态。我找到了Ember Modal Dialog 插件并能够设置它，以便在application.hbs中始终显示一个模态。但是，我无法理解一些事情，但首先是我的文件。

application.hbs

{{site-header}}
{{outlet}}
{{#if isShowingModal}}
  {{#modal-dialog close="toggleModal"
                  alignment="center"
                  translucentOverlay=true}}
    Oh hai there!
  {{/modal-dialog}}
{{/if}}
{{site-footer}}

网站-header.js

import Ember from 'ember';

export default Ember.Component.extend({
  isShowingModal: false,
  actions: {
    toggleModal: function() {
      this.toggleProperty('isShowingModal');
    }
  }
});

所以，我在 site-header.hbs 中有按钮的代码：

<li class="login-button"><button class="btn btn-block btn-danger" {{action 'toggleModal'}}>Login</button></li>

据我所知，动作是在site-header.js中找到toggleModal属性并执行上面的函数切换属性。

但是，application.hbs如何“看到”isShowingModal的值？它是否甚至可以看到该值，因为模态没有出现？
当大多数开发人员都有模态时，他们都会进入application.hbs，因为你希望它们出现在屏幕{{outlet}}区域的中间吗？如何改进包含多个模态的过程？
当用户点击标题中的按钮时，我应该做出哪些更改才能显示模式？

Answer 1

好的尝试一下。在site-header.js

中

export default Ember.Component.extend({
  actions: {
    toggleModal() {
      this.sendAction('toggleModal');
    }
  }
});

Application.hbs

{{site-header toggleModal='toggleModal'}}
{{outlet}}
{{#if isShowingModal}}
  {{#modal-dialog close="toggleModal"
                  alignment="center"
                  translucentOverlay=true}}
    Oh hai there!
  {{/modal-dialog}}
{{/if}}
{{site-footer}}

应用程序控制器

export default Ember.Controller.extend({
    actions: {
        toggleModal() {
            this.toggleProperty('isShowingModal')
        }  
    }
})

因此，操作从site-header组件发送到site-header组件。从那里它被发送到应用程序控制器。在application.hbs中，toggleProperty='toggleProperty'将组件中的操作连接到控制器的操作哈希。在控制器操作哈希中，它由toggleModal()处理并切换isShowingModal属性。当模态关闭时，ember-modal-dialog会触发由toggleModal()处理的关闭操作，该操作会再次切换isShowingModal属性。

Answer 2

应用程序模板无法查看site-header的属性。只有site-header组件才能看到其属性。还有其他方法可以访问它们。
没有必要在申请中包含所有模态。插件最有可能处理定位。在您的情况下，您也可以将模态代码移动到site-header组件。
将模态代码放在网站标题模板中。（或）您可以在应用程序中使用isShowingModal变量，从site-header向应用程序发送操作并切换其值。

在站点标题Ember 2.0

2 个答案: