如何从控制台访问已知的Ember组件 [英] How to access a known Ember component from console

问题描述

使用Ember调试Chrome扩展程序，我已经在要自动化的网站中标识了此组件（但没有直接访问权限来更改代码）：

Using Ember debug Chrome extension, I have identified this component in a website I am trying to automate (but do not have direct access to change the code):

<MYAPP@component:zipcode-field::ember592>

在层次结构中显示为：

application
    engine
        myui
            zipcodeField

如果我在调试器中编辑该元素的 value 属性，它将根据需要更新UI和模型。我可以从控制台通过单线执行此操作吗？

If I edit the value property of that element in the debugger, it updates the UI and model as desired. Can I do this via a one-liner from the console?

更新：到目前为止，我可以在控制台中输入以下内容：

Update: So far, I am able to enter this in the console:

Ember.lookup.$E.container.lookup("MYAPP@component:zipcode-field")

但无法像调试器一样访问/更改其值属性。

But unable to access/alter its value property as in the debugger.

更新：

在回答其中一项问题时，我的目标是拥有一个控制台， Liner，可以将其提供给未安装任何调试器的人，以便以相同的方式运行代码。在控制台中使用变量 $ E 要求在运行代码之前已手动选择了元素，这还不够。

In feedback to one of the answers, my aim is to have a console one-liner, which could be given to someone without any debuggers installed in order to run the code with the same behaviour. Using a variable such as $E within the console requires that the element has been manually selected prior to running the code, which would not be sufficient.

推荐答案

如果我错了，请纠正我，但似乎您没有使用琥珀色检查器（在 firefox 并作为 bookmarklet ）。

Correct me if I am wrong but it seems that you aren't using the ember inspector (available on firefox and as a bookmarklet).

一旦安装完毕，检查调试和修改与余烬有关的任何事情都非常容易，为此，我将使用chrome版本。

Once you have that installed it is really easy to inspect debug and modify anything ember related, for the purpose of this answer I will be using the chrome version.

在运行ember应用程序的标签中打开chrome dev工具，一旦进入开发人员的ember标签，
工具。

Open up your chrome dev tools in the tab that has your ember app running, once there head to the ember tab in the developer tools.

要查看组件，您必须选中一个复选框

In order to see the components you will have to tick a checkbox

启用后，您将能够看到当前使用的所有组件。

Once enabled you will be able to see all of the components currently used.

单击某个组件将打开一个包含该组件所有属性的面板。

Clicking on a component will open up a panel that contains all of the component's properties.

为了从控制台访问所有这些属性您需要做的就是单击组件旁边的 $ E 。

In order to access those properties from the console all you need to do is click on the $E next to the components.

单击后，您应该会看到类似的内容

Once clicked you should see something similar in the console.

Ember Inspector ($E):  Class {helperName: (...), logout: (...), isOpenBinding: StreamBinding, currentUserBinding: StreamBinding, _morph: Morph…}

现在，您需要进行操作以获取属性值：

Now all you need to do in order to get the property values:

$E.get('myProperty');

并设置它们：

$E.set('myProperty', newValue);

这篇关于如何从控制台访问已知的Ember组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！