Question

所以我创建了这个应用程序的一部分，它有一个模态窗口组件，当你将属性设置为true时，它应该打开..

application.hbs有：

{{#modal-window enabled=true title="Manage Admins"}}
{{/modal-window}}

在modal-window.js中，我有一个执行this.set('enabled',false)的动作closeModal，同样打开它，你将它设置为true。

应用程序底部有一个导航菜单，它使用不同的组件help-link，admin-link等.admin-link也是一个拥有自己的hbs和js文件的组件。这就是应用程序的设计方式。在index.hbs的底部：

  <div class="configs-list-footer">
{{help-link}}
{{admin-link action='showModal'}}
<div class="logout-link">
  <a {{action 'invalidateSession'}} class="tv-icon">
    <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g transform="translate(1.000000, 1.000000)"><path d="M0.347826087,8 L10.7826087,8"></path><polyline id="Stroke-937" points="8 5.2173913 10.7826087 8 8 10.7826087"></polyline><path d="M1.03123478,4.83526957 C2.23471304,2.18831304 4.90253913,0.347617391 8.00027826,0.347617391 C12.2263652,0.347617391 15.6524522,3.77370435 15.6524522,7.9997913 C15.6524522,12.2258783 12.2263652,15.6519652 8.00027826,15.6519652 C4.88862609,15.6519652 2.21036522,13.7952696 1.01453913,11.1288348"></path></g></g></svg>
    <span>Logout</span>
  </a>
</div>

那里的动作在admin-link.js文件中调用了一个动作，但似乎没有办法告诉模态窗口从OUTSIDE本身设置enabled为true，这是任何程序的基本功能。

在搜索互联网几个小时后，我无法想象如何在点击admin-link组件（基本上是一个锚标签）时简单地将modal-window的'enabled'属性设置为true ..

我已经找到了如何从Index路由调用一个动作，但是就像组件到组件一样，我无法弄清楚如何从Index路径改变模态窗口的属性。

任何时候网上有人询问如何做到这一点，他们会遇到“组件应该是孤立的，不知道其他一切”，没有明显的方法来为UI做一些基本的事情。

我正在使用Ember 2.12.1

Answer 1

我知道这是一个Ember问题;但我强烈建议你过去Quick start documentation of React。面向组件的前端开发有很好的解释。 Lifting state up section中存在的一个特定短语如下：＆＃34;通常，有几个组件需要反映相同的变化数据。我们建议将共享状态提升到最近的共同祖先。＆＃34;

现在就是这种情况。显示模态对话框的状态不属于modal-window本身，因为您需要从其他位置切换它。因此，你需要在共同的祖先处理这种状态;我猜你的情况就是application.js控制器。因此，应该将动作冒泡到application控制器（我的意思是即使关闭模态对话框也应该由动作中的application控制器执行）。

关于您的问题，AFAIK没有办法在另一个组件中设置组件的属性。我通常应用的技术是将状态提升到共同的祖先。很少，我更喜欢创建service并在服务中定义属性和功能以维护应用程序范围的状态。因此，如果您更喜欢第二种方法，则可以将服务注入到两个组件中，一个组件可以显示属于该服务的状态，而另一个组件可以通过服务中的功能对其进行修改。

你对被隔离的组件是正确的。然而，单独工作的组件是无用的;组件应接受所有者的属性，并应提供要处理的操作（事件）。不要忘记应用数据向下动作原则，它通常与提升状态原则一起工作。这是一个很长的描述;但我希望它会有所帮助。

Answer 2

它不是您确切问题的答案，但我们用于模态的方法是将组件包装在条件中而不是使其成为组件的属性。 e.g。

{{#if manageAdminsIsOpen}}
  {{#modal-window title="Manage Admins"}}
  {{/modal-window}}
{{/if}}

然后控制器上的操作用于切换manageAdminsIsOpen。

我做了一个Ember Twiddle，显示an example。

如何从另一个组件设置Ember组件的属性？

2 个答案: