如何从控制台访问已知的Ember组件

Question

使用Ember调试Chrome扩展程序，我已在我尝试自动化的网站中识别出此组件（但无法直接访问以更改代码）：

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

在层次结构中显示为：

application
    engine
        myui
            zipcodeField

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

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

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

但无法像在调试器中那样访问/更改其value属性。

更新

在对其中一个答案的反馈中，我的目标是拥有一个控制台单行程序，可以在没有安装任何调试程序的情况下将其提供给某人，以便以相同的行为运行代码。在控制台中使用诸如$E之类的变量要求在运行代码之前手动选择该元素，这是不够的。

Answer 1

如果我错了，请纠正我，但似乎您没有使用ember inspector（可在firefox和bookmarklet上找到）。

一旦你安装了它，很容易检查调试并修改任何与ember相关的内容，为了这个答案，我将使用chrome版本。

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

要查看组件，您必须勾选复选框

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

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

要从控制台访问这些属性，您只需单击组件旁边的$E即可。

点击后，您应该在控制台中看到类似内容。

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

现在您需要做的就是获取属性值：

$E.get('myProperty');

并设置它们：

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

Answer 2

组件只是一个视图，因此以下内容应该有效：

Ember.View.views[<GUID>]

所以在你的例子中：

Ember.View.views['ember592']

如果要修改/读取value属性，则需要使用get / set，例如：

Ember.View.views['ember592'].get('value')

Ember.View.views['ember592'].set('value', 'newValue')

Answer 3

找到一个与Ember 2.13一起使用的要点

App.__container__.lookup('-view-registry:main')[componentId]; // componentId i.e. "ember4322"

归功于ngyv：https://gist.github.com/ngyv/819e2cc78eca2a3b19599707e1461205