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

所以我创造了这个应用程序，有一个应该在设置启用真正的财产，以打开一个模式窗口组件的一部分。这如何从另一个组件设置Ember组件的属性？

application.hbs有这样的：

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

在模态-window.js我有一个动作closeModal，this.set('enabled',false)，同样打开它，你把它设置为true。

有上使用不同的组件将帮助链接，管理链接等管理环节的应用程序底部的导航菜单也有自己的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>

有要求在管理，link.js文件的行动，但似乎有没有办法告诉模态窗口的操作来设置启用为true从本身的外部这是任何程序的基本功能。

在网上搜索了几个小时后，我不能为了我的生活找出如何在点击管理链接组件时简单地将模式窗口的'enabled'属性设置为true（这基本上是一个锚标签）..

我已经找到了如何调用从索引路线的动作，但后来就像使用组件组件我无法弄清楚如何模态窗口的属性从指数路径改变。

每当有人问网上如何做到这一点，他们都遇到了“部件应进行隔离，并没有意识到一切的”，没有明显的方式做事情如此基本的UI。

我用灰烬2.12.1

来源

2017-04-13 Rose Nation

这不是一个回答您的具体问题，但我们使用的情态动词的办法是包裹组件的条件，而不是使其成为组件的属性。例如

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

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

我提出的灰烬玩弄表示an example。

来源

2017-04-13 21:02:24 mikej

我有一个条件的模态窗口本身但这是一个好主意。然后，我可以从路由本身中处理该条件，而不是从组件中进行操作。仍然希望仅为了未来目的而看到我的问题的答案。我们的整个应用程序由Ember由外部承包商构建，我将不得不学习它。 –

所以我把这个代码在那里，但我不知道在哪里定义manageAdminsIsOpen ..我想我从指数路由的行动this.set（“manageAdminsIsOpen”）设置它，但我不能得到它的工作。 –

我对此感到困惑。我有application.hbs，application.js，index.js，index.hbs和其他很多文件，就像在官方的ember文档中我从来没有任何线索要把代码放在哪个文件中。我只是试图把每个JS文件中的管理员管理都在Ember扩展部分中作为对象的属性，或者仅在JavaScript外部的块中使用，无论我放在哪里，它都不起作用。只要将“manageAdminsIsOpen”放在该块中就可以定义它？它是否必须在某处明确定义？ –

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

这是你现在的情况。显示模态对话框的状态不属于modal-window本身，因为您需要从其他地方切换它。因此，你需要在共同的祖先中管理这个状态;那就是你的情况下的application.js控制器。因此，动作应该鼓起来，直到控制器（我的意思是即使关闭模态对话框也应该在动作中由application控制器执行）。

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

你是对自己被隔离的组件。然而，单独独立工作的组件是无用的;组件应接受来自所有者的属性，并应提供可操作的操作（事件）。不要忘记将数据应用于行动原则，并且通常适用于解除状态原则。这是一个长期的描述;但我希望这会有所帮助。

来源

2017-04-13 21:13:50 alptugd

我认为你想说的是mikej下面说的或者主要是他写的代码示例。我理解这两个，但既不能解决我的问题，因为我不知道如何使其工作。 application.js，index.js，app.js，xyz.js ..我不知道该把什么放在哪里，因为从来没有人说过，所有东西都是“放在”控制器中“而不说什么血腥的地狱”它“是和哪个控制器，哪个文件是明确的，以及将文件放在哪里。我看到它放在Ember.whatever.extend之外的例子，它放在对象中的例子等等。 –

我会尽量让你一个非常简单的演示你的情况，当我有时间的时候。 – alptugd

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

回答

相关问题